If you haven't check TailwindCSS, you might want to. I don't want to repeat the awesomeness here ðĪŠ
TL;DR. Full implementation can be found on my G...
For further actions, you may consider blocking this person and/or reporting abuse
Hey thanks for this - super helpful! I'm running into an issue though when I use the svelte class shorthand:
Purgecss ins't detected that I'm using the class active :(
This extractor is working for me, but I've not tested it thoroughly:
Hey Tom,
I haven't tried it yet. It's probably related to the purgecss regex.
See more here: tailwindcss.com/docs/controlling-f.... When the class name is not found anywhere in the source code. It will try to remove that code. Hence the class active is removed.
You can find the regex implementation in github.com/muhajirdev/svelte-tailw... . in
defaultExtractor
part.A quick solution for this it to put class "active" into whitelist.
Here's an example I whitelist "html", and "body" in nextjs-tailwind template github.com/muhajirdev/nextjs-tailw...
Hey,
Yeah you're right it's an issue with the regex. It matches the whole string class:active. I tried to come up with a regex that could handle that but failed miserably! My current solution was to drop that svelte feature and use the classnames package to simplify optional classes.
I think whitelisting would work too, but I'm using tailwindcss so I was adding lots of classes like that. I didn't want have to keep addind lots of little utility classes to a whitelist.
Cheers!
I've noticed as soon as I import
main.css
, I lose the styles defined in my svelte components (using thestyle
tag as normal). I don't mind so much as I prefer to do all my styling with Tailwind and usingapply
, but is that to be expected? Just want to make sure I'm not doing something wrong.I've actually solved this, so the Svelte styles work as normal alongside Tailwind:
rollup.config.js
give a name to the extracted CSS so it doesn't clash with the CSS generated by Svelte, for example:public/index.html
public/tailwind.css
to.gitignore
Hi!!
Thank you for this tutorial. I have a problem.
I'm trying to create my own classes in tailwind so I can apply them. I created the file 'tailwind.config.js', and imported it into 'postcss.config.js' as follows:
thepracticaldev.s3.amazonaws.com/i...
tailwind.config.js:
thepracticaldev.s3.amazonaws.com/i...
I try to apply the added class in the tailwind.config.js file in HTML and it doesn't apply. Could you tell me how to make it work?
Thank you so much.
Thanks a bunch for writing this! It was super easy to follow :)
One note: I ran into an issue with PostCSS and autoprefixer. I had to downgrade autoprefixer from v10 to v9.8.6.
Source
found it
templates now use
public/build/bundle.js
This was really helpful, thanks so much!!
You're welcome
Is is the same setup for sapper more or less?
i haven't tried yet with sapper unfortunately :).
Probably similar, just take a look at config file , postcss and rollup
This post made it easy to update a Svelte app for experimenting withTailwind CSS, thanks ððū
you're welcome
sadly this does not seem to work at time of writing this comment any longer due to github.com/rollup/rollup/issues/3443 - apparent issues with rollup
thanks so much, I struggled to get this working on my own... all the info from the libraries/frameworks seems 90% complete
Glad to hear it helps you :)
Here's an implementation of TailwindCss and Svelte...nicely name Smelte!
smelte.netlify.com/