If you decide that you want to use Tailwind CSS with preprocessors, like PostCSS, I’ve discovered one simple piece of information that makes everything come together. As far as I can tell, it isn’t mentioned in the docs, but it is essential.

The configuration I prefer with Tailwind CSS is to use PostCSS so that I can use nesting in my CSS. This allows me to write SCSS in any custom CSS I produce alongside Tailwind CSS.

First, follow the steps for Using PostCSS on the Get started with Tailwind CSS page.

Then work through the PostCSS configuration instructions on the Using Tailwind CSS with Preprocessors page. The instructions boil down to the following steps.

Install postcss-import.

npm install -D postcss-import

Then add it as the very first plugin in your PostCSS configuration (in the newly created postcss.config.js file):

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-import': {},
    tailwindcss: {},
    autoprefixer: {},
  }
}

To install the PostCSS nesting plugin, run:

npm install -D @tailwindcss/nesting

Then modify your PostCSS configuration file to include the nesting plugin. Add it to your PostCSS configuration somewhere before Tailwind:

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-import': {},
    'tailwindcss/nesting': {},
    tailwindcss: {},
    autoprefixer: {},
  }
}

The Missing Info

Here is the thing the docs fail to mention. To get this all to work, you’ll want to make sure you process your Tailwind CSS with the “--postcss” flag. So, in my package.json file, here is what I have listed for scripts:

"scripts": {
    "build": "postcss scss/main.scss -o css/main.css",
    "watch": "npx tailwindcss -i ./scss/main.scss -o ./css/main.css --postcss --watch"
}

Adding the “--postcss” flag to my watch script is the secret. So, when you run "npm run watch," nested SCSS is processed into CSS.