How does it work?

[frederikhors]

I cannot find anywhere:

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

How does it work?

[Brian Liu]

I explained on Medium https://link.medium.com/5XwGlbOLFeb in details, that is the flow of sveltePreprocess with default tailwind.css

[frederikhors]

Yes. I read that. What I'm saying is: how can you get the @tailwind base style if you don't have it?

[Brian Liu]

Ah right, I was a bit confused at the beginning as well but then I stepped back and rethink again Svelte architecture, then it kinda make sense for me.

The usual way we used Tailwind we need to add below into a .css file then import "index.css"; in our application entry, so this tells whatever bundler you used that the entry app.tsx depends on index.css and it need to be processed by postcss (as you defined in the config) with tailwind plugin

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

In Svelte, style sit inside each .svelte component file and it will be preprocessed by sveltePreprocess with tailwind plugin using default tailwind.css (checks node_modules/tailwindcss/tailwind.css), so you don't actually need to have define @import at all)

[frederikhors]

Oh wow. I think I'm not following you.

If I use that imports or not the final code is not the same, or not?

[Brian Liu]

This is default tailwind.css in node_modules/tailwind, as your import example, final code will be the same but if you just want base and components then final code won't be the same. However, 99% of tailwind usage import these three as copy & paste from their offical doc, so don't see any chances will need to customise import as it will be purge for production build anyway, so why bother 🤷

[Brian Liu]

Close this as not an issue but discussion