SvelteJS and SvelteKit with Tailwind Utilities

//Edit ✏️
sveletejssvelte

Using Tailwind with Svelte js and SvelteKit

Tailwind CSS can be used to make websites in the fastest and the easiest way. Tailwind CSS is basically a utility-first CSS framework for rapidly building custom user interfaces. Tailwind CSS tutorial as well as Tailwind CSS examples are something that may turn out to be very useful for beginners who want to master the basics of this utility-first CSS framework. But not only for them

Create A Svelte App

First of all, create a svelte app by entering the following command.

npx degit sveltejs/template your-awesome-project
cd your-awesome-project && yarn
#Or if you are using npm
npx degit sveltejs/template your-awesome-project
cd your-awesome-project && npm install

Add dev dependencies

That was easy! next, install the following dev dependencies.

yarn add -D autoprefixer postcss-cli tailwindcss concurrently cross-env
#Or if you are using npm
npm install autoprefixer postcss-cli tailwindcss concurrently cross-env --save-dev

[IMPORTANT] Tailwind v2 and PostCSS v8 just dropped and at the time of this update (2020–11–23), there are breaking changes you might experience.

This will be fixed eventually but in the meantime, here is the combo that’ll work for you if you want to use the latest version of tailwind:

👉 tailwindcss@npm:@tailwindcss/postcss7-compat
👉 postcss@^7
👉 autoprefixer@^9
yarn add tailwindcss@npm:@tailwindcss/postcss7-compat postcss-cli@^7 autoprefixer@^9 concurrently cross-env -D
#OR With NPM
npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss-cli@^7 autoprefixer@^9 concurrently cross-env --save-dev

Read this to learn more: 👉 https://tailwindcss.com/docs/installation#post-css-7-compatibility-build

Now that’s done, I’ll relinquish the control to other me from the past 👇

Configure Post CSS and Tailwind

At the root directory of your project, create the Post CSS & Tailwind config files:

touch postcss.config.js public/tailwind.css npx tailwindcss init In postcss.config.js, paste this:

module.exports = () => ({ 
  plugins: [
    require("tailwindcss"), 
    require("autoprefixer")
  ],
})

In public/tailwind.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

npm Scripts

Add the following scripts to your package.json (overwrite the original values set by svelte)

"scripts": {    
   "watch:tailwind": "postcss public/tailwind.css -o public/index.css -w",
   "build:tailwind": "cross-env NODE_ENV=production postcss public/tailwind.css -o public/index.css",    
   "build": "yarn run build:tailwind && rollup -c",
   "start": "sirv public",
   "serve": "serve public -p 80",
   "dev": "concurrently \"rollup -c -w\" \"yarn run watch:tailwind\""
},

In the dev script, concurrently allows the svelte server to run alongside PostCSS that will watch your tailwind and generate an index.css file in the public folder of your project.

Running the server

yarn run dev
#Or if you are using npm
npm run dev
Open http://localhost:5000

Import The Generated Tailwind Style to Your Project Open index.html from the public folder of your root project directory, and import the index.css generated by PostCSS

<!-- Paste me in public/index.html -->
<link rel='stylesheet' href='/index.css'>

Just like that, you have added tailwind CSS to your svelte app.

There is one last thing, the tailwind file can get really large, megabytes kind of large, There are lots of unused CSS classes in index.css. It’s okay in development mode, but you don’t want to ship that to your clients.

Luckily, there is a solution for that.

Purge Your CSS ⚠ This part of the guide will not be required if you have JIT enabled in your tailwind.config.js file.

If you have no idea about what JIT is, here is a great article that’ll get you up to speed (https://tailwindcss.com/docs/just-in-time-mode).

If you don’t have JIT enabled, I’m not done with you yet, keep scrolling… ;)

Purging your CSS can be CPU intensive and might slow down your environment if you were to do it in development mode.

For this reason, your CSS will only be purge when the NODE_ENV is set to production. this value is set during the build phase (see the build script in the package.json).

in tailwind.config.js (root directory), enter the following code:

purge: ["./src/**/*.svelte", "./src/**/*.html"],

That’s it! You can now use all your tailwind classes in svelte.

Using Tailwind with SvelteKit

=================================

we’ll go through the steps that will allow you to use the latest and greatest version of tailwind with SvelteKit.

Create A Sveltekit App First of all, create a brand new svelte kit app by entering the following command. (Choose a skeleton project)

npm init svelte@next your-awesome-project
# Choose a skeleton project from the cli
# We'll choose Javacript for this example instead of Typescript
cd your-awesome-project 
# Install the dependencies with:

yarn or npm

Add dev dependencies

That was easy! next, install the following dev dependencies.

yarn add -D autoprefixer postcss-cli tailwindcss concurrently cross-env
#Or if you are using npm
npm install autoprefixer postcss-cli tailwindcss concurrently cross-env --save-dev

Configure Post CSS and Tailwind

At the root directory of your project, create the Post CSS & Tailwind config files:

./postcss.config.cjs in the root of the project and src/styles/tailwind.css

Then enter the command npx tailwindcss init tailwind.config.cjs

🔴 Noticed how we’ve used the .cjs extension instead of .js In postcss.config.cjs, paste this:

module.exports = {
  plugins: {
    autoprefixer: {},
    tailwindcss: {},
  },
}

In src/styles/tailwind.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

npm Scripts

Add the following scripts to your package.json (overwrite the original values set by svelte)

"scripts": {
  
  "dev:only": "svelte-kit dev",
  "build:only": "svelte-kit build",
  "preview": "svelte-kit preview",
  "tailwind:watch": "cross-env TAILWIND_MODE=watch cross-env NODE_ENV=development postcss src/styles/tailwind.css -o src/styles/tailwind-output.css -w",
  
  "tailwind:build": "cross-env TAILWIND_MODE=build cross-env NODE_ENV=production postcss src/styles/tailwind.css -o src/styles/tailwind-output.css",
  
  "dev": "concurrently \"yarn run dev:only\" \"yarn run tailwind:watch\"",
  "build": "yarn run tailwind:build && yarn run build:only"
},

Concurrently allows the svelte server to run alongside PostCSS that will watch your tailwind and generate a tailwind-output.css file in the ./src/styles/folder.

This file will be used later.

Running the server

yarn run dev
# Or if you are using npm
npm run dev
# Open http://localhost:3000

Import The Generated Tailwind Style to Your Project Create a layout component called __layout.svelte:

src/routes/__layout.svelte Inside __layout.svelte

<script>
  import "../styles/tailwind-output.css";
</script>
<!-- Try some classes here -->
<h1 class="uppercase text-indigo-500">
  Hello People of Earth
</h1>

One last thing to do

in tailwind.config.cjs (root directory), enter the following code:

module.exports = {
  // ...
  mode: 'jit', // ⚠ Make sure to have this
  purge: ["./src/**/*.svelte"],
  // ...
}

And now restart dev server and enjoy tailwind with svelteKit App

References

Comments