Tailwind CSS VS windicss

In this article, we analyze the usage of String.raw in Tailwindcss source code.

Tailwind is a utility-first CSS framework that provides low-level utility classes to help you style your elements directly in your HTML. Unlike traditional CSS frameworks that come with predefined components (like Bootstrap), Tailwind allows you to build custom designs by combining utility classes without writing any actual CSS.

The Tails Open Source Components are a (no-config) copy'n paste free collection of hand-crafted templates and components built in TailwindCSS.

For this project, I used PureScript + React + Tailwind css + shadcn/ui components. I assume you’ve heard of the first two (if not, see PureScript overview). The other two are blessings for the copy-paste-driven development.

Surprisingly, in many projects, I don't really need more than what Jekyll can offer. So, I remain a loyal user. Until recently, I didn't have much to complain about, not until I decided to rebuild poshtui.com with Tailwind CSS. The only way to add Tailwind and Heroicons was through a JavaScript bundler, and I'm no longer used to that approach.

Tailwind CSS: A utility-first CSS framework to style the component efficiently Tailwind CSS.

Tailwind CSS is a utility-first CSS framework that allows users to create user interfaces by combining predefined classes through inline styling. Tailwind CSS has become increasingly popular in recent years due to its efficiency and ease in creating beautiful user interfaces.

Tailwind CSS

Tailwind CSS: Tailwind CSS offers utility-first styling, enabling full control over your design by using pre-defined classes.

As a developer working with Ruby on Rails and the Phlex framework, I encountered a common pain point: writing Phlex views that are clean, readable, and efficient, while also adhering to RuboCop’s default style guidelines. While RuboCop is a fantastic tool for enforcing coding standards and preventing messy codebases, it can feel a bit restrictive when applied to view code, especially when using frameworks like Phlex along with something like TailwindCSS.

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.