Tailwind CSS · Utilities reference · all subjects

preprocessors

7 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Tailwind CSS v4.0 is not designed to work with CSS preprocessors

Tailwind CSS v4.0 is a full-featured CSS build tool designed for a specific workflow and is not designed to be used with CSS preprocessors like Sass, Less, or Stylus. Tailwind CSS itself should be thought of as your preprocessor; you shouldn't use Tailwind with Sass for the same reason you wouldn't use Sass with Stylus.

Tailwind automatically bundles CSS imports

Tailwind will automatically bundle other CSS files you include with @import without the need for a separate preprocessing tool like Sass or postcss-import.

Native CSS variables work with Tailwind

All modern browsers support native CSS variables without the need for any preprocessor. Tailwind relies on CSS variables heavily internally, so if you can use Tailwind in your project, you can use native CSS variables.

Tailwind uses Lightning CSS to process nested CSS

Tailwind uses Lightning CSS under the hood to process nested CSS. Tailwind flattens nested CSS so it can be understood by all modern browsers.

Tailwind generates utility classes on-demand instead of using loops

In Tailwind, utility classes you may have used loops for in the past (like col-span-1, col-span-2, etc.) are generated for you on-demand by Tailwind whenever you use them instead of having to be predefined. Since you do the vast majority of your styling in your HTML with Tailwind, not in CSS files, you don't need features like loops designed for programmatically generating lots of custom CSS rules.

Use Tailwind color palette instead of preprocessor color functions

When using Tailwind, the recommended workflow is to use a predefined color palette that includes light and dark shades of each color, such as the default color palette included with the framework, instead of using preprocessor functions like darken or lighten from Sass or Less.

Use color-mix() and math functions instead of preprocessor equivalents

Modern CSS features like color-mix() allow you to adjust colors at run-time directly in the browser, even adjusting colors defined using CSS variables or the currentcolor keyword, which isn't possible with preprocessors. Browsers also support math functions like min(), max(), and round() natively, so there's no need to rely on a preprocessor for these features.

Give your agent this brain