Components to use SCSS instead of CSS

Question

Components to use SCSS instead of CSS

Closed this issue 2 years ago · 3 comments

Hi @gregsullivan - we've been using your theme as a start theme internally for almost six months now, and something we have come up against is writing component's is done with CSS vs SCSS.

I assume this is to benefit from being able to use @apply directives, but also to generate editor styles too.

Did you have an idea of a way forward where components can be written in SCSS instead of CSS? I don't need you to have this totally fleshed out - but just asking before we dive in, what your approach might be?

Thanks for all your work on this project though - it's been delightful working with tailwind + WordPress so far.

Answer 1 · 2023-07-31T17:29:22.000Z

Hi @tareiking!

Which Sass features are you interested in using?

A few things I'd flag:

Tailwind 3.4 is going to bring changes to how CSS is processed. See here: https://tailwindcss.com/blog/2023-07-18-tailwind-connect-2023-recap
Sass-style nesting is already supported by _tw (via tailwindcss/nesting). The Tailwind documentation has some discussion on Sass-style variables.
The Tailwind documentation also discusses using Sass alongside Tailwind.

The basic gist is that you need to run Sass first, and you may need to make some changes to the Sass you write to support Tailwind. But secondary to that, if you just need nesting and variables, you may not need to use Sass at all.

Please let me know if you have any other questions!

Answer 2 · 2023-07-31T20:24:40.000Z

Hi @gregsullivan - can i just take a minute to say you are awesome!

I really appreciate how you keep up with the associated projects and constantly are aware of these things.

To answer your question, it is largely sass variables and nesting - I think we'll ready up internally for the Tailwind changes in 3.4 and re-read the docs.

Feel free to close this, and thank you very much :) 🎉 👍

Answer 3 · 2023-07-31T23:14:08.000Z

Thanks @tareiking—I really appreciate it!

The changes in 3.4 are not meant to be breaking, so it's likely everything will keep working as it does now. The only thing I'm going to need to work out is whether _tw should be updated to ensure it takes advantages of the speed improvements. The one current feature I'm not sure will be supported is the *.css import of the contents of the components folder. I'm hoping I'll be able to keep that in place, but if I can't, I'll need to weight the benefits of the improved developer experience there against keeping the Tailwind integration as straightforward and generic as possible.

Please let me know if you have any other questions, and I'll close this out in the meantime!