S2T2: Snowpack + Svelte + TailwindCSS + Typescript

I have been wanting to try out Svelte for a while since I love its encapsulation pattern, which is exactly the same as webcomponents (check out my content-visibility webcomponents). Moreover, a combination of how I distaste Webpack evolved to chaos nowadays (moaning and pulling hairs every time I have to deal with it) and my obsessive love of TailwindCSS since v1. I created a S2T2 GitHub and CSA template to quickly create/setup a new application from.

S2T2

Having boilerplates (templates) of different library/framework/tool combinations is the best way for all levels of developers to start with so they can focus on developing instead of spending hours trying to sort out env setup especially package dependency. Thanks to create-snowpack-app provides loads of templates contributed from community to help people to start trying out Snowpack with different frameworks.

Why another S2T2 GitHub/CRA template? Yes, if you go check out Snowpack community templates here, there is a S2T2 template already. The major stands out of this app-template-sstt are

• TailwindCSS purge is working 🎉, so no unused garbage css classes in your application
• @apply bg-white p-2 m-3 animate-pulse works perfectly without syntax error
• No unnecessary postcss postcss-cli postcss-import and postcss-nested dependencies needed in the application level.

Start building SSTT application by csa

npx create-snowpack-app my-sstt-app --template app-template-sstt
cd my-sstt-app
npm start

or go to https://github.com/LBrian/app-template-s2t2 then click Use this template

Deep dive the improvements, app-template-sstt leverage Svelte postcss preprocess to do the to follow Svelte compiling strategy.

const sveltePreprocess = require('svelte-preprocess');
module.exports = {
  preprocess: sveltePreprocess({
    defaults: {
      script: 'typescript',
    },
    postcss: {
      plugins: [
        require("tailwindcss")(),
        require("autoprefixer")()
      ]
    }
  })
};

The snowpack-svelte-ts-tw leverages Snowpack @snowpack/plugin-build-script to run postcss cli to convert TailwindCSS in order to use TailwindCSS classes in the HTML code area but it sacrifices purge feature of TailwindCSS (garbages in your application) and @apply is not working (see below, that’s why later they added postcss: true in their svelte.config.js to fix it).

Yes, you cannot use TailwindCSS classes in the HTML code snippet of .svelte file (i.e. class="p-2 m-4") with app-template-sstt but technically you still can by adding postcss handling in snowpack.config.js.

We need to slightly change our mindset of using TailwindCSS with Svelte to component level instead of application level like withReact Preact and etc. Every .svelte file get complied by @snowpack/plugin-svelte at run time, html and <script> code snippets are compiled to into a js file (see below) and <style> is extracted into a .css file

This is the main reason why you cannot use class="p-2 m-4" with app-template-sstt because html template is compiled into javascript and you will need postcss of Snowpack to transpile TailwindCSSfor you. Let me summarise above into two simple bullet points

• Add postcss in svelte.config.js to make TailwindCSS works in the <style> code area of .svlete file
• Add postcss in snowpack.config.js to make TailwindCSS works in the html code area of .svelte file

With that, I wouldn’t suggest to have two postcss process just for TailwindCSS to be able to work in both html and <style> area, it just increase the complexity and build time. A Svelte component is designed to be encapsulated with html style and script three parts, so just leave the code at where it supposes to be so we can take the maximum advantages of the combinations.