Two Tailwind Configs in Same Project

[tleish]

It's common to have one project with 2 UI's. One UI for the majority of users, and a second UI for admin users.

Using Webpacker you can generate multiple stylesheets. How could you do this so that TailwindCSS/PostCSS reads 2 configurations and generates 2 stylesheets? One with only primary website CSS (reading primary html/js files) and the 2nd with only admin CSS (reading only admin html/js files).

[MartinHughes-BPC]

My hacky way of doing this would probably involve a batch file/shell script that would overwrite the tailwind config (and any other config stuff, which in my case would be the Laravel Mix config) with the separately maintained configs for Main and Admin which then runs the build process in sequence. I don't know if there's something more "elegant" you could do with webpack, but in my book simpler is often better and easier to understand.

That said, I can't see much value doing this with a utility framework like Tailwind. When I build the CSS for my site - which is getting quite large! - the CSS produced is 12 Kb in size. It's tiny! And even though my admin pages look a little bit different to the regular ones, there's still a lot of overlap in the TW classes used in both. So if I did separate them I'd probably end up in a worse situation.

Using Tailwind you've kinda got to throw out what you knew about working with CSS in the past and just go for it whole-hog. Embrace the thing, use components, and life just becomes much easier.

[tleish]

Thanks for the suggestion and perspective.

[simonswiss]

I was going to say this as well - even if your admin styles vs general user styles look quite different, you'll find out you can probably handle both with very little CSS.

I personally wouldn't bother generating two different files with different configs for that scenario, the CSS output (JIT or after purge) will be extremely small, and both styles are likely to share a lot of margin, padding, flex container utility classes anyway 👍