This content originally appeared on Level Up Coding - Medium and was authored by Glory Katende
The much-awaited Sveltekit is finally here, and it’s just as amazing as we thought it would be! it brings so many new cool features and makes the development process even easier.
Svelte wasn’t the only js package cooking something special, Tailwind just released their version 2.2 with some new and amazing features. The most important being JIT, which you can check here in case you’ve missed it.
It basically watches your files and compiles them on the fly! The output CSS uses only the classes you’ve included in your project. This results in a much, much smaller output file, and allows even more flexibility with tailwind.
In this tutorial, we’ll go through the steps that will allow you to use the latest and greatest version of tailwind with SvelteKit.
The link to the repo will be provided at the end of this guide.
We will be using PostCSS in this tutorial, head over to this link to learn all about it if you are new to this.
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
The cross-env package will allow you to set environment variables in your package.json scripts if you are running windows, as the usual ENV_VAR=value command will cause an error.
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 && yarn run injectManifest"
},
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
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>
Just like that, you have added tailwind CSS to your svelte app.
There is one last thing.
In order to help tailwind know where to get the classes to compile. We have to give it the location of our source directory. Otherwise, the resulting tailwind-output.css would be empty.
One Last Config
in tailwind.config.cjs (root directory), enter the following code:
module.exports = {
// ...
mode: 'jit', // ⚠ Make sure to have this
purge: ["./src/**/*.svelte"],
// ...
}Stop the server with Ctrl+c, and rerun it with yarn run dev
That’s it! You can now use all your tailwind classes in sveltekit.
Thanks for taking the time to read!
Did you enjoy this article? leave feedback and share it with someone who might find it useful.
Links:
How to use Svelte Kit with Tailwind CSS/JIT (Just-in-time Compilation) was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Level Up Coding - Medium and was authored by Glory Katende
Glory Katende | Sciencx (2021-06-18T19:43:39+00:00) How to use Svelte Kit with Tailwind CSS/JIT (Just-in-time Compilation). Retrieved from https://www.scien.cx/2021/06/18/how-to-use-svelte-kit-with-tailwind-css-jit-just-in-time-compilation/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.