search

svelte-add / svelte-add

Easily add integrations and other functionality to Svelte(kit) apps
https://svelte-add.com
MIT License
1.45k stars 34 forks source link

Allow to add tailwindcss and SCSS to the same project #132

Open TheOnlyTails opened 2 years ago

TheOnlyTails commented 2 years ago

Currently, you cannot add tailwindcss and SCSS together, because tailwindcss requires postcss to function.

However, it's possible to use postcss/postcss-scss to support SCSS syntax in PostCSS.

I suggest that if the svelte-add command is called with both tailwindcss and SCSS, instead of adding the regular SCSS config, it'll add it with postcss-scss syntax.

canadaduane commented 2 years ago

Would this allow a svelte component to take advantage of both tailwindcss in "class" attributes on HTML, as well as CSS defined inside a component's <style /> tag? e.g.

<div class="lg:text-3xl custom">Hello World</div>

<style>
.custom {
  color: red;
}
</style>
babichjacob commented 2 years ago

Would this allow a svelte component to take advantage of both tailwindcss in "class" attributes on HTML, as well as CSS defined inside a component's <style /> tag? e.g.

<div class="lg:text-3xl custom">Hello World</div>

<style>
.custom {
  color: red;
}
</style>

This sample already works. Did you have a more complicated example in mind, because I don't personally see how SCSS relates?

TheOnlyTails commented 2 years ago

Would this allow a svelte component to take advantage of both tailwindcss in "class" attributes on HTML, as well as CSS defined inside a component's <style /> tag?

Yes. PostCSS-SCSS simply adds SCSS syntax to PostCSS. Nothing more.

canadaduane commented 2 years ago

This sample already works. Did you have a more complicated example in mind, because I don't personally see how SCSS relates?

You're right, my mistake.

babichjacob commented 2 years ago

While it's not officially supported / deliberately programmed to work, it actually works to start the project with Tailwind CSS then add SCSS after the fact:

npm init --yes @svelte-add/kit@latest my-new-app -- --with tailwindcss # or just postcss if you don't want Tailwind
# or in the interactive menus, select PostCSS with or without Tailwind CSS:
npm init @svelte-add/kit@latest

# then add SCSS after in the project directory
npx svelte-add@latest scss

This is just an accident from https://github.com/svelte-add/svelte-add/issues/137#issuecomment-909614362, so I am sorry if it ever stops working.