🗺️ Built-in PostCSS and Tailwind support

[markdalgleish]

Related issues

• Tighter Tailwind integration, either built-in or via PostCSS support #5072
• Built-in CSS autoprefixing based on Browserslist config #5017
• .browserslistrc support #4769

Motivation

The initial driver for this RFC was to explore built-in Tailwind support, but we realised that providing built-in PostCSS support will achieve this while also opening up a lot more use cases, e.g. postcss-preset-env, Autoprefixer.

Usage

First, you'll need to enable PostCSS. Similar to other recent CSS work, we can put it behind a feature flag:

/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
  future: {
    unstable_postCss: true,
  },
  // ...
};

With this flag enabled, we'll pick up the consumer's PostCSS config and use it whenever processing CSS in our compiler.

One potential edge case is that consumers may want to supply different plugins when using Vanilla Extract vs regular CSS source files since Vanilla Extract is already playing the role of preprocessor, so we might want to support the context object via postcss-load-config, e.g.

// postcss.config.js
module.exports = (ctx) => ({
  plugins: ctx.vanillaExtract
    ? { /* ... */ }
    : { /* ... */ }
});

With this system in place, we could provide a default config with the Tailwind plugin already set up if we detect a Tailwind config/dependency but no PostCSS config.

Note that when using Tailwind via PostCSS, you need to insert the Tailwind directives somewhere in your CSS:

@tailwind base;
@tailwind components;
@tailwind utilities;

Besides cleaning up the setup needed to use Tailwind, this also unlocks the ability to use other Tailwind functions and directives anywhere in your CSS.

Open questions

Do we want to support Tailwind out of the box even when the PostCSS feature flag isn't enabled?

[chaukhoa97]

How will this affect how Tailwind works with Remix?

[kiliman]

I believe this will eliminate the need to run the tailwindcss process separately. That's one less thing to deal with. The tailwind config will continue to work as before.

[predaytor]

Will it be possible to use SCSS together?

[sergiodxa]

If there's a PostCSS plugin it should be possible to parse SCSS syntax in a CSS file, but otherwise Remix would have to also support SASS/SCSS to run their own compiler.

[mcljs]

Could you leave an example repository with this configuration?

[sergiodxa]

This is an RFC, there's no implementation yet

[jamesarosen]

How will this play with #3244 ? That is, assuming the other proposal lands, will it be possible/easy to use the out-of-the-box postcss implementation with a custom express server, but without a custom cli?

[bitttttten]

Could one option be enabling Built-in Tailwind support when tailwindcss has been installed into the project? Then the user gets to control which version of Tailwind they are using, and then you don't need to introduce the overhead of PostCSS.

Although supporting PostCSS and Tailwind as two separate things could also be an idea.

[machour]

Check the merged PR description : #5229

[samadadi]

It is not working for tailwind in 1.12.0.

[machour]

yep, it appears something went wrong with the release: #5229 (comment)