SvelteKit and Tailwind in one line

In short just follow this guide Tailwind with SvelteKit 👀 Below we have a one liner and a more detailed part below.

❗️[EDIT]❗️ Found out about Svelte Add that does this for you! Made a new post about it Adding Tailwind using Svelte Add 👀

Quick step - one liner

Here is all steps combined into one step. Notice this only works for new projects. Remember to update tailwind-sveltekit to the thing you want your project to be named. If you have a new SvelteKit project skip the first three lines :) Copy and the paste the code in your terminal

npm init svelte@next tailwind-sveltekit &&
cd tailwind-sveltekit &&
npm install &&
npm install -D tailwindcss postcss autoprefixer &&
npx tailwindcss init tailwind.config.cjs -p &&
mv postcss.config.js postcss.config.cjs &&
echo "module.exports = {
  content: ['./src/**/*.{html,js,svelte,ts}'],
  theme: {
    extend: {}
  },
  plugins: []
};" > tailwind.config.cjs &&
echo "@tailwind base;
@tailwind components;
@tailwind utilities;" > src/app.css &&
echo "<script>
  import \"../app.css\";
</script>

<slot />" > src/routes/__layout.svelte &&
echo "<h1 class=\"text-3xl font-bold underline text-red-500\">Welcome to SvelteKit</h1>
<p>
  Visit <a href=\"https://kit.svelte.dev\">kit.svelte.dev</a> to read the
  documentation
</p>" > src/routes/index.svelte &&
npm run dev

Detailed steps

For the more detailed part here is the summary from the guide on tailwindcss.

First we create our skeleton SvelteKit application

npm init svelte@next tailwind-sveltekit
cd tailwind-sveltekit
npm install

Next we can install the tailwind dependencies

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init tailwind.config.cjs -p
mv postcss.config.js postcss.config.cjs

Next we need to tell tailwind what files that should be taken into consideration by updating the content attribute.

module.exports = {
  content: ['./src/**/*.{html,js,svelte,ts}'],
  theme: {
    extend: {}
  },
  plugins: []
}

To be using tailwind we need to include the tailwind styles. We can do that by creating a src/app.css file where we apply the tailwind directives.

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

Last thing we need to do is to import it in our project. We could just import it in the index.svelte file. But then it will only work on that route. If we create another page does styles will not be included if we put it in the index page. So to fix this we can make use of the layout route SvelteKit have. Create src/routes/__layout.svelte and import the style there.

<script>
  import '../app.css'
</script>

<slot />

Now all routes will import the app style file.

Now we can start our project and we are good to go!

npm run dev

Now we can play around with the tailwind classes. E.g update index.svelte with some classes and see how it affects the page.

<h1 class="text-3xl font-bold underline text-red-500">Welcome to SvelteKit</h1>
<p>
  Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the
  documentation
</p>