TSDX with TailwindCSS PostCSS plugin -- inject and purge options

[leo-petrucci]

I'm new to tsdx and I'm having trouble setting up TailwindCSS. I've created a tsdx.config.js and set up the needed postCSS plugins:

const postcss = require('rollup-plugin-postcss');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
const tailwindcss = require('tailwindcss');

module.exports = {
  rollup(config, options) {
    config.plugins.push(
      postcss({
        plugins: [
          tailwindcss({
            purge: ['./src/**/*.tsx'],
            darkMode: false, // or 'media' or 'class'
            theme: {
              extend: {},
            },
            variants: {
              extend: {},
            },
            plugins: [],
          }),
          autoprefixer(),
        ],
        inject: false,
        // only write out CSS for the first bundle (avoids pointless extra files):
        extract: !!options.writeMeta,
      })
    );
    return config;
  },
};

I then import my src/styles.css in one of my .tsx files inside src.

// styles.css
@tailwind base;
@tailwind components;
@tailwind utilities;

TSDX then actually does build the CSS file and outputs it correctly at dist/modal.cjs.development.css but:

• None of the css is purged
• The css isn't imported in any of my components, so no styles are applied

Any tips on getting this to work?

[leo-petrucci]

Looks like the problem was with: inject. I switched it to inject: true, and css is working.

Purging can be fixed by changing the build command to "build": "NODE_ENV=production tsdx build",.

[agilgur5]

Yea inject is set to false in the example following the library pattern of providing a CSS file that your consumers can import. You can inject the styles yourself, but that can be a bit intrusive as a library author -- #186 (comment) and surrounding comments go into this in some detail.

This does seem to be specific to rollup-plugin-postcss and not really TSDX. Why Tailwind's purge option doesn't work is a question for the Tailwind PostCSS plugin too. There is an integration test for cssnano and autoprefixer, so those work.

It sounds like based on your findings that Tailwind's plugin requires NODE_ENV to be set instead of having a configuration (might be a mismatch in Rollup vs PostCSS operating modes, though it's not mentioned in the Tailwind docs). There is an issue for setting NODE_ENV but for the Babel use-case instead of PostCSS use-case: #687 . It hasn't gotten any up-votes so it does not seem to be that often used/needed.
I'm not sure what other ramifications there are of setting NODE_ENV though or how that may impact other plugins

[stephencweiss]

Update: In addition to changing inject, you also need to ensure that extract is false because inject is always false when extract: true.

@creativiii - am I correct that once you modify the inject property to true, you don't need anything else? No .postcssrc in the example/, etc.?

const postcss = require('rollup-plugin-postcss');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
const tailwindcss = require('tailwindcss');

module.exports = {
  rollup(config, options) {
    config.plugins.push(
      postcss({
        plugins: [
          tailwindcss({
            purge: ['./src/**/*.tsx'],
            darkMode: false, // or 'media' or 'class'
            theme: {
              extend: {},
            },
            variants: {
              extend: {},
            },
            plugins: [],
          }),
          autoprefixer(),
        ],
-          inject: false,
+          inject: true,
        // only write out CSS for the first bundle (avoids pointless extra files):
        extract: !!options.writeMeta,
      })
    );
    return config;
  },
};

[hoangvu12]

Is there anyway to add TailwindCSS to example? I just want to use tailwind on example, not the actually library. Thanks