Use @import instead of @tailwind

[tonysm]

This was changed in this PR: #155

But I think packages can benefit more from using the postcss-import style in the main TailwindCSS setup.

In the Rich Text Laravel package, for instance, I dump some CSS file to the resources/css/ folder and in order to be able to add the @import "./_trix.css"; line to the main CSS file, I'd need to swap the entire file for a version of it using @import, which can be problematic since developers could have added more things to it and all.

If this was webpack, we would have to install the postcss-import plugin and require it ourselves, but I've tested this with the new Vite setup and it looks like just works. Not sure if there's anything to do.

[jessarcher]

I'm a fan of the @tailwind declarations because it's what they document pretty much everywhere, so it keeps things standard.

As far as I understand, you can still combine @import with @tailwind, but the @import calls must come first. The only reason to use @import 'tailwindcss/*' is if you need to import other things after any of Tailwind's imports.

I imagine you would always be prepending your @import call anyway, as it can't come after any of the user's custom CSS, so I'd have thought it would still work?

If you did need to place your @import somewhere else in the CSS, you could easily swap out the @tailwind declarations with something like this:

preg_replace('/@tailwind (\w+)/', "@import 'tailwindcss/\\1'", 'css file contents')

[taylorotwell]

@jessarcher @timacdonald can you review this and mark as ready for review once you have done so?

[tonysm]

@jessarcher Oh, interesting. Yeah, I can just prepend my @import statement to the file. I'm okay with that. Thanks!