Starting a SvelteKit project with TailwindCSS

Lately, I heard more and more about Svelte being "the next big thing" in the JavaScript world and I decided to give it a shot. Being a huge fan of TailwindCSS, I wanted to share the setup procedure to get both those tools into your next project.

Creating the SvelteKit project

Nothing fancy here, just follow the instructions written on the SvelteKit documentation:

npm init svelte my-app
cd my-app

Installing TailwindCSS

For the next part, everything is pretty standard and explained in the TailwindCSS documentation:

# Add TailwindCSS as a dev dependency
npm install -D tailwindcss postcss autoprefixer

# Initialize the tailwind and postcss configuration files
npx tailwindcss init tailwind.config.cjs -p
mv postcss.config.js postcss.config.cjs

Configuring TailwindCSS

Once the dependencies have been installed, you can configure them.

In the newly created tailwind.config.js file, change the content:

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

If you do not plan on using TypeScript you can remove ts from the array. Same goes for any other option.

Considering that SvelteKit does not generate an app.css file by default (at the time I am writing this article), create it next to app.html and add the TailwindCSS directives in it:

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

Then, create the root layout of your application at./src/routes/__layout.svelte and reference the newly created app.css:

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

<slot />

If this syntax does not look familiar to you, you can learn more about layouts on the official documentation

Assessing that everything works fine

Last but not least, change the index.svelte file content to the following, to test our configuration:

<h1 class="flex h-screen justify-center items-center text-5xl animate-bounce">
    It works!
</h1>

If you see your text bouncing on the screen, it means that you are good to go to develop your next project!