How could you generate multiple CSS files at once?

[KTibow]

I want to have multiple inputs/outputs for tailwind. Doing npx tailwindcss -i **/*.css -o **/*.css --watch just creates an infinite loop, so is there any way to take multiple CSS inputs, and generate multiple CSS outputs?

[KTibow]

Looking at https://tailwindcss.com/docs/reusing-styles, I can see that this is a design choice to not do this. However, the recommended method is

Create a template partial or JavaScript component

What if I use vanilla JS? What if I don't want to use JS at all?

[adamwathan]

This all kind of depends what you are actually trying to even do here.

1. You want to compile multiple input files into multiple output files, all with their own tailwind.config.js configuration. In this case your best bet is to just run Tailwind multiple times with different arguments. You can use a package like npm-run-all or concurrently to bundle this all up into one script.

2. You want to compile multiple input files into a single output file. What you probably want here is to actually just compile a single file, but use postcss-import to import all of your individual files into one file before processing it with Tailwind. Here's some documentation on that: https://tailwindcss.com/docs/using-with-preprocessors#build-time-imports

Regarding this question:

What if I use vanilla JS? What if I don't want to use JS at all?

That's why we say template partial or JavaScript component. Template partials can be ERB templates in Rails, partials in Django, Blade files in Laravel, whatever. This doesn't really seem related to the original question of compiling multiple files though so I'm still unsure what you are actually trying to do.

My best guess is you want to have a separate CSS file for each "component" in your site? If that's the case just make separate files, and import them all into one main CSS file, then process that with Tailwind. Same thing you would do with Sass or whatever.

Personal advice though is that if you are planning to write a lot of custom CSS like this when using Tailwind, you probably just shouldn't use Tailwind. Tailwind is for styling things directly in your HTML with utility classes, if you aren't doing that you are just going to have a bad experience because that's what the framework is for.

[KTibow]

I understand how you were confused by this question. I was originally trying to have different components in my site, and I wanted each page to have its own styling for certain elements (so I wouldn't need to type out the styling each time), but now I see how that goes against the vision of Tailwind.

You want to compile multiple input files into multiple output files, all with their own tailwind.config.js configuration. In this case your best bet is to just run Tailwind multiple times with different arguments. You can use a package like npm-run-all or concurrently to bundle this all up into one script.

So it sounds like I would just need to run it with each CSS file, if I still wanted to do that.

You want to compile multiple input files into a single output file. What you probably want here is to actually just compile a single file, but use postcss-import to import all of your individual files into one file before processing it with Tailwind. Here's some documentation on that: https://tailwindcss.com/docs/using-with-preprocessors#build-time-imports

I thought that was supported by default, just by doing npx tailwindcss -i **/*.css -o site.css.

Regarding this question:
What if I use vanilla JS? What if I don't want to use JS at all?
That's why we say template partial or JavaScript component. Template partials can be ERB templates in Rails, partials in Django, Blade files in Laravel, whatever. This doesn't really seem related to the original question of compiling multiple files though so I'm still unsure what you are actually trying to do.

Oh, I just didn't know what "template partial" meant. I see how I could use that now, and that seems like the preferred choice. How would I get Tailwind to find the classes when it generates the final stylesheet, given that I used a framework that uses non-standard syntax though?

My best guess is you want to have a separate CSS file for each "component" in your site? If that's the case just make separate files, and import them all into one main CSS file, then process that with Tailwind. Same thing you would do with Sass or whatever.

Originally I wanted to have per-page styling, so like if I had ul styled some way on one page's CSS but differently on a different page's CSS, the styles wouldn't collide. But I see how that was unclear.

Personal advice though is that if you are planning to write a lot of custom CSS like this when using Tailwind, you probably just shouldn't use Tailwind. Tailwind is for styling things directly in your HTML with utility classes, if you aren't doing that you are just going to have a bad experience because that's what the framework is for.

Alright, I think from a couple of sources, I've figured out how I'm supposed to use Tailwind. Thanks for trying to help me, even though my original post was fairly unclear.

[dy]

Multiple compile comes useful for web-components.

[jamesarosen]

Also for the common pattern of base.css for the whole site and admin.css for the internal-only parts so end-users don't have to download that CSS.

[KTibow]

tailwind is tiny, i don't think theres too much of a problem

[deadcoder0904]

i needed it for 2 different styles: print & screen.

i was initially gonna use concurrently with 3 different link tags in html but i don't think it works when watching files. you'll still need 2 different terminal tabs (3 if you conside index.css) & you can't use concurrently since watch flag doesn't return anything so the other command can't run.

i went with wrapping my css files within @media print & @media screen.

print.css

@media print {
 /* write styles for the print here */
}

screen.css

@media screen {
 /* write styles for the web here */
}

index.css

@import 'tailwindcss/base';

/* use this to style the web */
@import './screen.css';

/* use this only for print */
@import './print.css';

@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

this way i only have to build one index.css & don't need to open 3 different terminal tabs when editing css :)

[KTibow]

Why not use print: in your HTML instead?

[deadcoder0904]

@KTibow i am styling the book in css because the html is generated. i can put classes on the hastscript but too tedious. css selectors in this case are easy :)

[yuuk]

I got the same senario, Did you use the better way to resolve it?

[dy]

Stumbled again: we have many components with corresponding css files under src/**/*.css locations.
Is there a particular impedance making tailwind -i src/**/*.css -outDir dist? It seems many tools from tsc to copyfiles support that pattern

[adamwathan]

I’ve never seen a CSS tool work that way, like Sass or Less. What order would the files be concatenated in? In CSS, the order of your rules is very important.

With tools like tsc each file is compiled separately and output as its own file. Is that what you want, to take 75 input files and generate 75 output files, so you’d have 75 <link> tags at the top of the document?

[dy]

The consumer project uses bundler (nextjs), so these css files are just bundled properly (eg inlined in js). But 75 links - yes, that's what nextjs does (sort of, it merges and resplits them.)
It would be enough to just copy css files untailwinded, but our library is published to npm, and consuming bundlers (like default react-scripts) don't process node_modules and throw errors on '@apply' tokens in deps.

[dy]

If someone is interested in workaround, it would be that:

"build:css": "cd src && find . -name \"*.css\" -exec tailwind -c ../tailwind.config.js -i {} -o ../dist/{} \\; && cd .."

Every file runs tailwind command, so it takes a bit of time.

[vishal-g]

This works. Thanks. Any idea how to make it "watch" file changes and generate css on the fly? Tried adding "--watch" after "../dist/{}" part of the command. But it's not working.

[vishal-g]

I could manage to do this using npm "onchange" package!