What's the best way to get multiple CSS "outputs" using Tailwind and PostCSS?

[mattkoch614]

Hi all, what's the appropriate way to use PostCSS to generate two tailwind output files? Our situation is that we have our main app, which uses a highly configured tailwind.config.js file, but we also have the need to generate HTML that will be converted into a PDF. This PDF generation needs a different design system, so we want to use a separate Tailwind CSS configuration to produce a separate CSS "output." Suggestions welcome.

[adamwathan]

Hey @mattkoch614! What build tools do you use currently? There are a few different approaches depending on what you're using 👍

Easiest option is Laravel Mix (ignore the name, it's a very good general purpose abstraction on top of webpack) which lets you configure separate PostCSS plugin chains for different input files in a very straightforward way:

const mix = require('laravel-mix')

mix.postCss('input.css', 'output.css', [
  require('tailwindcss')('./tailwind.config.js'),
  require('autoprefixer')
])
.postCss('input.css', 'output-pdf.css', [
  require('tailwindcss')('./tailwind-pdf.config.js'),
  require('autoprefixer')
])

Another option is just a few different scripts in your package.json file to run builds with separate configs using the tailwind CLI tool, or using postcss-cli.

[mattkoch614]

Hi @adamwathan thanks for the reply. We don't use mix, just plain ol' webpack. We've got that set up with postcss and tailwind using the recommended approach in your docs.

We sort of got this to work by just setting up an npm script like the following, where it's just two commands combined, one runs postcss and the other reverts back to using npx tailwindcss build.

 "scripts": {
    "build:css": "postcss src/assets/styles/main.css -o public/index.css && npx tailwindcss build src/assets/styles/pdf.css -c tailwind.pdf.config.js -o public/pdf.css"
  },

I was hoping that postcss would allow me to just pass through the -c flag to specify a custom config file but that didn't work...

[adamwathan]

The -c flag expects a directory name so it will probably work if you pass it a directory and make sure to have a postcss.config.js file in that directory.

With webpack you can also put your PostCSS configuration inline in your webpack file:

https://github.com/postcss/postcss-loader#plugins

You'd have to set up two instances of the loader and configure them differently (with a unique ident value for each), and output the two different chains to different files.

[mattkoch614]

Thanks @adamwathan - For now, the approach I outlined seems to be working OK but if we need to hop in and use a different approach I've bookmarked this conversation 🤘

[mattkoch614]

This is a separate question, but while I have you can you tell me how to override the listStyleType config option? The default is none but we want the degfault to be list-desc....

I can pose a separate question for it here in the Discussion.

[adamwathan]

We explain that a bit here, basically just need to add your own base styles:

https://tailwindcss.com/docs/preflight/#lists-are-unstyled

[mattkoch614]

Great, we were doing this just in the wrong spot :(

[alexdelgado]

Is there a reason the tailwind cli doesn't accept globs? Running into an issue were I'd like to read a source directory src/css/*.css and have it auto-output to a build directory build/css/ without having to add new lines to the package.json.

Seems really silly to need to use another package like mix or webpack to have multiple entries.