How to set up separate CSS file to use @apply?

[monk-85]

Hi Tim,

Thanks for building this Django integration!

What do I need to do to set up the equivalent of step two here to be able to use @apply, which happens in a separate CSS file? https://tailwindcss.com/docs/installation or in more detail: https://tailwindcss.com/course/composing-utilities-with-apply/

Many thanks

[timonweb]

Hey, thank you for letting me know the package helps. Well, basically, you don't need to do anything special, just edit the styles.scss files and your stuff there. Alternatively, you can import any scss file into styles.scss to keep things clean.

[monk-85]

OK, thank you for the fast reply!

And are you then using PurgeCSS at the end to avoid a 1mb CSS file? If so, what's the easiest way to set this up in the "Django-Tailwind-Stack"?

Sorry, I feel bad for asking all these newbie questions, must sound lazy. Just a bit brain-fried from setting everything up. Going from Bootstrap to Tailwind seems to be quite the jump for a beginner.

[timonweb]

no prob. No it doesn't spit 1mb css file. It's 300kb non-gzipped if you have the default config. We don't use PurgeCSS here as it's an optional thing that could be installed by a user. You need to figure this part out by yourself, I've never used PurgeCSS, maybe in the future I'll add support for it.

[monk-85]

OK thanks, I'll save figuring PurgeCSS out for another day, hah.

Regarding the file size - when I run "python manage.py tailwind build", I get a /static/css/styles.min.css file which is 825kb (Windows machine). Hmm.

[ghost]

Hi, I can't figure out how to use @apply in my scss files. Is it still possible? All I have at the moment is a theme app with a static/css/dist/styles.css file (which seems to be the talwind default theme). How can I use @tailwind directives (in order to use @apply)? Which file should I edit (I can't find any scss file in the default created app)?

Edit: I figured out just now there is a file in static_rsc/src/styles.css