Tailwind with SvelteKit
How to use everyone's favourite utility-first CSS framework, Tailwind CSS, alongside the emerging new isomorphic web app framework, SvelteKit!
At the time of the video Tailwind was fresh off its version 2 release, and SvelteKit was not yet in version 1, so things were expected to change; the video goes over how you could put the two frameworks together back then! "Plus, we go over what needs to be done, so even if things change, we'll have a better chance of debugging and tweaking in the future 🙏"
***
Future Johnny interjecting here, as SvelteKit just cut its beta release! It's switched bundlers from Snowpack, mentioned in the video, to Vite... There shouldn't be such dramatic changes from now on! I wrote a post detailing the current process of setting up Tailwind with SvelteKit:
https://magrippis.com/blog/2021/how-t...
The essential changes from the video is that you only need to add a `postcss.config.cjs` and `tailwind.config.cjs`: note the `.cjs` extension! Checkout the demo repo to peruse the code at your leisure:
https://github.com/jmagrippis/tailwin...
Even further future Johnny made a video for Tailwind 3 & SvelteKit beta!
• Tailwind with SvelteKit: How to setup...
***
In this video:
We install tailwindcss, postcss & autoprefixer
We configure SvelteKit & snowpack to respect our postcss config
We create a $layout component to wrap every route of our app
We include the tailwind directives in our $layout
We style with tailwind utility classes!
BONUS: We extend the tailwind config with a custom colour, and enable "bouncy button on click" functionality ⛹️
Learn more about Tailwind: https://tailwindcss.com/
Learn more about SvelteKit: https://svelte.dev/blog/whats-the-dea...
Let me know what you're trying out with Svelte and SvelteKit!
Смотрите видео Tailwind with SvelteKit онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Johnny Magrippis 22 Декабрь 2020, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 6,381 раз и оно понравилось 179 людям.