DEV Community

Pierre Bouillon
Pierre Bouillon

Posted on


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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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: [],
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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

  import '../app.css';

<slot />
Enter fullscreen mode Exit fullscreen mode

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!
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)