DEV Community

Nostro
Nostro

Posted on • Updated on

Using TailwindCSS with SvelteKit

Setting up SvelteKit with TailwindCSS is now more straightforward than it used to be even a couple of weeks ago. Still, you may look around more than necessary find how to do it, so here is the basic setup.

You may also be interested in
SvelteKit + .env
SvelteKit + Heroku

Create a svelte app

npm init svelte@next my-awesome-app
cd my-awesome-app
npx svelte-add@latest tailwindcss
npm i
Enter fullscreen mode Exit fullscreen mode

Or if you're feeling lucky (I do) and are already in the my-awesome-app directory.

npm init svelte@next && npx svelte-add@latest tailwindcss && npm i
Enter fullscreen mode Exit fullscreen mode

Remove boilerplate CSS

This is optional as the tailwind lines have been added by svelte-add, but if you're going for tailwind you probably don't want regular CSS messing up your fabulous layouts.

app.css

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

Using tailwind colors

Optional as well, if you intend to use them. Here's for importing the full list, leave out the ones you won't be using.

tailwind.config.cjs

//Add on top
const colors = require('tailwindcss/colors');

//Add in config
colors: {
    white: colors.white,
    black: colors.black,
    red: colors.red,
    orange: colors.orange,
    amber: colors.amber,
    yellow: colors.yellow,
    green: colors.green,
    lime: colors.lime,
    emerald: colors.emerald,
    teal: colors.teal,
    cyan: colors.cyan,
    skyblue: colors.sky,      
    blue: colors.blue,
    indigo: colors.indigo,
    violet: colors.violet,
    purple: colors.purple,
    fuchsia: colors.fuchsia,
    pink: colors.pink,
    rose: colors.rose,
    blueGray: colors.blueGray,
    coolGray: colors.coolGray,
    gray: colors.gray,
    trueGray: colors.trueGray,
    warmGray: colors.warmGray,
    },
Enter fullscreen mode Exit fullscreen mode

Or the full file

tailwind.config.cjs

const colors = require('tailwindcss/colors');

const config = {
    mode: "jit",
    purge: [
        "./src/**/*.{html,js,svelte,ts}",
    ],
    theme: {
        extend: {},
        colors: {
            white: colors.white,
            black: colors.black,
            red: colors.red,
            orange: colors.orange,
            amber: colors.amber,
            yellow: colors.yellow,
            green: colors.green,
            lime: colors.lime,
            emerald: colors.emerald,
            teal: colors.teal,
            cyan: colors.cyan,
            skyblue: colors.sky,      
            blue: colors.blue,
            indigo: colors.indigo,
            violet: colors.violet,
            purple: colors.purple,
            fuchsia: colors.fuchsia,
            pink: colors.pink,
            rose: colors.rose,
            blueGray: colors.blueGray,
            coolGray: colors.coolGray,
            gray: colors.gray,
            trueGray: colors.trueGray,
            warmGray: colors.warmGray,
            },
    },
    plugins: [],
};

module.exports = config;
Enter fullscreen mode Exit fullscreen mode

And you're good to go.

Discussion (0)