How to configure minimum development environment for Tailwindcss v3 to utilize @import

Question

The goal is to configure a development environment for Tailwindcss v3 that supports @import and the removal of unused custom CSS classes.

I am not using a bundler. The project depends on just HTML, CSS, and JS i.e. no frameworks. If it's important, I use VS Code.

This is what I've tried.

Project's configuration:

// tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
    content: [
        './src/**/*.{html,js}',
    ],
    darkMode: 'media',
    theme: {
        extend: {
            fontFamily: {
                primary: '"Inter", sans-serif',
                mono: ['"DM Mono"', ...defaultTheme.fontFamily.mono]
            }
},
    },
    variants: {
        extend: {}
    },
    plugins: [
        // ...
    ]
};

// postcss.config.js
module.exports = {
    plugins: [
        require('postcss-import'),
        require('tailwindcss'),
        require('autoprefixer'),
        require('cssnano')
    ]

/* styles.css*/
@import "tailwindcss/base";
@import "./custom-base-styles.css";

@import "tailwindcss/components";
@import "./custom-components.css";

@import "tailwindcss/utilities";
@import "./custom-utilities.css";

And this is my commend line:

 $ npx tailwindcss -i ./src/css/styles.css -o ./css/styles.css --watch

Running just the above command, the setup does not inline the custom*.css files.

To achieve inlining, I also have to execute below, which on the surface, seems as if it should not be necessary.

 $ npx postcss-cli './src/css/styles.css' -o './css/styles.css' -w

The end result is, Tailwindcss is not removing my unused custom styles, even when wrapped in the required @layer {}.

Step 5 here (Using PostCSS) just says to start your build process and does not offer any details.

Step 4 here (Tailwind CLI) only says to start the Tailwind CLI process.

So, what am I missing?

Do I need to use a bundler? If so, my preferred one is Rollup.

Other details:

autoprefixer:^10.4.0
cssnano:^5.0.10
postcss-cli:^9.0.2
postcss-import:^14.0.2
tailwindcss: "^3.0.7

Answer 1

Your intuition is correct. You do not need to run post-cli. PostCSS will execute once you update your Tailwind command.

You are missing the --postcss parameter.

Assuming that postcss.config.js is in your project's root, copy this to the script section of your package.json:

"tw": "tailwindcss -i ./src/css/styles.css -o ./css/styles.css --postcss postcss.config.js --watch"

Then from the command line at the project's root, run:

npm run tw

Note: with the above command, Tailwind will not rebuild the output file after the HTML file has been saved. You'll need to edit and save one of the CSS source files to initiate a rebuild. (Perhaps I still have a configuration problem?)

One other item, how are you testing for the removal of unused custom classes?

The mistake I made was just commenting out the HTML utilizing the custom class and then looking at the CSS output to see if the class was removed. But Tailwind (as documented somewhere) won't remove a class if the class appears anywhere in the markup, even in a commented line. If you're testing your build process, rename the class in the markup to anything, and then Tailwind will drop the custom class from the CSS output.