Tailwind CSS VS windicss

UI, CSS : tailwindcss + PostCSS + Radix UI + UI components by shadcn

If you use Tailwind CSS and use the dark mode with the class strategy instead of media query, you can override the variables like this:

Also at the start I used TailWind CSS but to remove the css build step I converted everything back to css, keeping some tailwind css in my main.css file.

Ok you can take the easy way out and just use a framework like Bootstrap or Tailwind. As a matter of fact Tailwind has it's own Refactoring UI Book that you can use to learn. In my opinion, UI designers just wing it for the most part. At least there's no single method to this.

Now, a similar process has been happening with CSS. Thanks to CSS-in-JS and, more recently, utility CSS solutions like Tailwind CSS, the process of styling also moved into JS code. Combined with JSX, your entire component can now be a single file, where all elements of a component intertwine.

There is a new trend gaining traction lately which is called “Locality of Behaviour principle”. It is a great new name for an old concept - cohesion. It’s growing lately around HTMX and TailwindCSS communities, but it’s an useful concept in general.

TailwindCSS

I built the frontend using nextjs with typescript. I am personally a fan of react-query and tailwind, so I used both of them in my project.

I began by researching different approaches to installing Tailwind into my computer and going over the documentation on how to get started. Luckily Tailwind has comprehensive documentation, covering everything from installation to customization. After creating the folder structure and setting up the config according to the style guide, that’s when the challenge really began. It was difficult to read through my HTML, I couldn’t wrap my head around how bloated it was.

why not use Windi CSS or Tailwind css?

Windi CSS, in contrast to Tachyons, is a very fresh framework. Started in the late December of 2020, it’s already gained a lot of attention and currently sits at respectable 1.5K GitHub stars.

No mention of Windi CSS? Didn't it inspire this?

However I decided it was time to question my own biases. I installed Tailwind Intellisense for VS Code and started up a test project with a starter that included Tailwind (actually it uses Windi, which is a Tailwind compiler). I then started making a basic site, forcing myself to use the utility classes for (most) all of the styling.

For more details, please check windicss

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.