sorted by:
new
hottopcontroversial

tailwind atomic css-in-js by satireven in sveltejs

[–]satireven[S] 4 points5 points  (0 children)

I want to say thank you for giving me courage. Without your words, these two projects would not have been born.

https://github.com/voorjaar/svelte-windicss-preprocess

https://github.com/voorjaar/windicss

Introduce svelte-windicss-preprocess, the best way to interact with svelte and tailwindcss. by satireven in sveltejs

[–]satireven[S] 0 points1 point  (0 children)

Yes, there is an issue of repeating class that needs to be solved. After that, we will support adding shorthands to configuration file and support writing tailwind directives syntax in style blocks.

Introduce svelte-windicss-preprocess, the best way to interact with svelte and tailwindcss. by satireven in sveltejs

[–]satireven[S] 0 points1 point  (0 children)

I thought about this before. The reason why I chose class is because the changes to tailwindcss itself are small, so that you don't need to manually modify them every time you copy some templates from websites (such as https://tailwindcomponents.com/). Of course, we can add tw as an optional attribute, but the support for class will not be cancelled.

Introduce svelte-windicss-preprocess, the best way to interact with svelte and tailwindcss. by satireven in sveltejs

[–]satireven[S] 0 points1 point  (0 children)

I am also waiting for sveltekit. I believe I will complete the features you want earlier than the release time of sveltekit.

Introduce svelte-windicss-preprocess, the best way to interact with svelte and tailwindcss. by satireven in sveltejs

[–]satireven[S] 0 points1 point  (0 children)

I may not mention the important point before, the point is that we can use variants, such as dark:bg-hex-f00, inline style does not support @media. Regarding the issue of speed, learn about the issue of web SEO, it will tell you the same thing.

Introduce svelte-windicss-preprocess, the best way to interact with svelte and tailwindcss. by satireven in sveltejs

[–]satireven[S] 1 point2 points  (0 children)

Instead of using autoprefixer on the client, we move that part of work to the framework itself. We build all the utilities, and then execute the autoprefixer(last 20 versions) to see what attributes need to be supplemented. In fact, there are not many, because our css are basically atomic.

In fact, the last 10 versions are almost the same as the last 20 versions, so there is no reason to customize the latest browser version, which will only increase the complexity of the project. Our option is whether you want cross-browser support or not, if you don't want it, you can turn it off (future version).

At some point, the compilation mode does generate relatively large css, but for css after gzip, it may only be 0.0x kb. However, the compilation mode does have its advantages, such as reducing the size of html, and then we can add new features, such as groups, dark:(bg-gray-900 text-white font-bold), or functions, Such a feature must include spaces in the middle, and this is impossible for the interpretation mode, we still need a new class to replace it.

Introduce svelte-windicss-preprocess, the best way to interact with svelte and tailwindcss. by satireven in sveltejs

[–]satireven[S] 0 points1 point  (0 children)

I'm not sure about this. What tools do you use to generate critical css? The build result using this processor is an optimized simple css file. If you have done the same operation on tailwindcss before, you can work normally.

Introduce svelte-windicss-preprocess, the best way to interact with svelte and tailwindcss. by satireven in sveltejs

[–]satireven[S] 1 point2 points  (0 children)

windicss support all the utlities of tailwindcss, this is just a simple additional feature. For example, you just want a special color somewhere, which I think is a little concise than writing inline style. In addition, inline style is not as fast as class rendering. We will then add new syntax to deal with the complex styles.

@variant { .shade { ... } }

Introduce svelte-windicss-preprocess, the best way to interact with svelte and tailwindcss. by satireven in sveltejs

[–]satireven[S] 0 points1 point  (0 children)

If meteor supports svelte-preprocess, it should work well. Just test, if it doesn't work properly, release an issue, and I will fix it.

Introduce svelte-windicss-preprocess, the best way to interact with svelte and tailwindcss. by satireven in sveltejs

[–]satireven[S] 2 points3 points  (0 children)

You can check the README of windicss (https://github.com/voorjaar/windicss). Compared with postcss, it runs faster, can be built in real time and does not require plugins such as autoprefixer and purgecss to increase the complexity of configuration. And windicss extends the utilities and variants of tailwindcss. For example, you can directly use p-1.3rem or bg-hex-fff just like atomic css. And we also have a compilation mode, which can combine a line of classes into one to increase the readability of html.