Tailwindcss: [Feature Proposal] : Build-in solution for working with multiple files

[michtio]

To keep an organised ( larger project ) codebase it would be nice that tailwind supports something like @import to be able to use different files.

Let's say I want to create a couple of components eg. buttons / cards with the utility classes because those will be used a lot of time during the process it would still be much more useful to split up the codebase than just adding it all to one file.

Would be nice to have an option like this to be built-in into tailwind rather than trying and to use other postcss plugins just for this functionality ( see postcss-import ) which has it's flas that you even need to use @tailwind preflight and @tailwind utilities in a seperate file. Which on it's turn is a little too much of "file splitting".

[fedetibaldo]

The thing is: when you create a package, it has to do one thing, and do it well.
Tailwind is a utility framework, not an all-in-one CSS preprocessor.
Moreover, adding an @import directive would clash with most of the other CSS preprocessors out there (e.g. SASS).
It's true: there would be no actual conflict since the behaviour would be the same, but given the ladder fact as true, what's the point in supporting @import rules in the first place?

[michtio]

@fedeTibaldo I'm not necessarily talking about @import , that could just be @include or @add or whatever naming you want to give it. I'm very focused on maintainable useful CSS creation. If Tailwind includes something like @apply which kind of replaces the @extend possibility of SASS ( which is not a best practise, I know that ) it seems to me that tailwind could be more powerful if you can create a couple of components based on the utility classes but keep those components in seperate files, which makes documenting / searching for your code through the file more useful.

Same goes if you want to make extra utilities, and you have a project that requires quite some custom utilities ( like custom border-radius things , some utilities that introduce transitions ... ) I'd rather have a transitions.css file and a border-radius.css file in a folder named utilities which I can then include in my tailwind build.

That's why the suggestion, I think it _could_ encourage people to create custom utilities and libraries to start with, how powerful tailwind might be it can't offer everything out of the box.

[michtio]

@aparajita As said in my first comment, postcss-import requires you to have seperate files just to have the @tailwind preflight and @tailwind utilities , also it comes with a lot of limitations and rules that need to be taken into consideration, which doesn't make it the greatest solution, and even can be a frustrating one.

It's just a suggestion that I personally think could make Tailwind even more powerful in my personal opinion.

[adamwathan]

So something I discovered the other day is that postcss-import will let you import files from node_modules, which means that rather than creating your own files for preflight and utilities, you can do this:

@import "tailwindcss/css/preflight";

@import "tailwindcss/css/utilities";

The imported preflight file contains our entire preflight styles, but the utilities file is actually just this:

@tailwind utilities;

...so all of the customization stuff will still work as expected; it's not a precompiled file or anything.

I'm going to mirror those files in the root directory for 0.5.0 so you'll be able to shorten it a bit more:

@import "tailwindcss/preflight";

@import "tailwindcss/utilities";

No plans to add Tailwind-specific import functionality at this time.