How To Use Minwax Scratch Repair Kit Crayon

How to use Svelte Kit with Tailwind CSS/JIT (But-in-fourth dimension Compilation)

The much-awaited Sveltekit is finally here, and it'due south only as amazing as we thought it would be! it brings so many new cool features and makes the evolution process even easier.

Svelte wasn't the only js package cooking something special, Tailwind just released their version 2.2 with some new and astonishing features. The nigh important being JIT, which you lot can check hither in case you've missed it.

Information technology 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 exist provided at the end of this guide.

We will exist using PostCSS in this tutorial, head over to this link to learn all about information technology if y'all are new to this.

Create A Sveltekit App

First of all, create a brand new svelte kit app by inbound the following command. (Choose a skeleton project)

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

Add together dev dependencies

That was like shooting fish in a barrel! adjacent, install the post-obit dev dependencies.

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

The cantankerous-env package will allow y'all to ready environment variables in your parcel.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 Postal service CSS & Tailwind config files:

                          ./postcss.config.cjs              in the root of the projection
and              src/styles/tailwind.css                        Then enter the command                          npx tailwindcss init tailwind.config.cjs

🔴 Noticed how nosotros'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 of operations;
@tailwind components;
@tailwind utilities;

Npm Scripts

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

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

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 afterward.

Running the server

            yarn run dev            #Or if you are using npm            npm run dev

Open http://localhost:3000

Import The Generated Tailwind Way to Your Project

Create a layout component called __layout.svelte:

            src/routes/__layout.graceful

Inside __layout.graceful

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

Merely like that, yous accept added tailwind CSS to your svelte app.

There is one last affair.
In gild to aid tailwind know where to go the classes to compile. Nosotros have to give information technology the location of our source directory. Otherwise, the resulting tailwind-output.css would be empty.

I Last Config

in tailwind.config.cjs (root directory), enter the post-obit lawmaking:

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

Stop the server with Ctrl+c, and rerun it with yarn run dev

That'south it! You tin can now use all your tailwind classes in sveltekit.

Thanks for taking the time to read!

Did you enjoy this commodity? go out feedback and share it with someone who might discover it useful.