CSS tools - robbiehume/CS-Notes GitHub Wiki

How the tools work together

PostCSS and Sass:

  • Sass is often used first to preprocess CSS, adding advanced features like nesting and variables. After Sass compiles the CSS, PostCSS can be used to further transform it, such as adding vendor prefixes or minifying the output

PostCSS and Tailwind CSS:

  • Tailwind CSS relies on PostCSS to function. When building your project, PostCSS processes Tailwind’s directives (like @tailwind base, @tailwind components, and @tailwind utilities) to generate the necessary utility classes and apply any custom configurations

Sass and Tailwind CSS:

  • You can use Sass and Tailwind CSS together in a project. Sass allows you to write more organized and maintainable styles for components, while Tailwind provides utility classes for rapidly building layouts and applying styles directly in your HTML

They can be combined in a single workflow:

  • Sass preprocesses the CSS
  • PostCSS processes the output with plugins (including Tailwind CSS) to generate the final styles

Tailwind CSS

General notes

  • Tailwind is a utility-first CSS framework that provides a wide range of utility classes to build custom designs directly in your markup without writing custom CSS
  • Can create a combined utility class with @apply:
    • .btn-primary { @apply bg-blue-500 text-white font-bold py-2 px-4 rounded; }
  • Relation to PostCSS: Tailwind CSS requires PostCSS to function. It uses it to generate its utility classes, apply custom configurations, and optimize the final CSS output
  • Relation to Sass: while Tailwind provides many styling utilities, you can still use Sass to handle complex styles or scenarios where utility classes might not be enough. They can coexist in a project, with Sass files processed first, followed by Tailwind’s utility generation

PostCSS

  • PostCSS is a tool for transforming CSS with JavaScript plugins. It processes your CSS files and applies transformations using plugins, such as autoprefixing, minification, nesting, etc.

Sass (Syntactically Awesome Style Sheets)

  • Sass is a preprocessor that extends CSS with features like variables, nesting, inheritance, and mixins. It compiles into standard CSS that the browser can understand