Using Tailwind With Svelte and Construct 3

After resuming playing with Svelte, TypeScript, and Construct 3, it’s time to add Tailwind CSS to my test project. I’ve previously covered this topic in 2021 (Tailwind CSS & Svelte), but a few years have passed since then. There’s a LogRocket tutorial (How to use Tailwind CSS with Svelte) updated in July 2023, but in my opinion, it doesn’t present the best solution. Consequently, here are my notes on how to add Tailwind CSS to a Svelte project.

I resume the project from a few days ago (this one) and navigate to the folder with the Svelte code using the terminal. I enter the following command in the terminal:

npm install -D tailwindcss@latest postcss@latest

This command adds Tailwind and PostCSS packages to Svelte. Then I add Autoprefixer:

npm install -D autoprefixer@latest

And finally, I can initialize Tailwind with the command:

npx tailwindcss init -p

This command creates two files:

• tailwind.config.js
• postcss.config.js

I start by modifying tailwind.config.js:

/** @type {import('tailwindcss').Config} */
export default {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
  content: ["./index.html", "./src/**/*.{svelte,js,ts}"], //for unused css
};

I add some elements to content to remove unused CSS styles from the project.

I also modify the postcss.config.js file:

import tailwind from "tailwindcss";
import tailwindConfig from "./tailwind.config.js";
import autoprefixer from "autoprefixer";

export default {
  plugins: [tailwind(tailwindConfig), autoprefixer],
};

I have two ways to allow Svelte to use Tailwind styles. The first is to create a TailwindCSS.svelte component:

<style>
  @tailwind base;
  @tailwind components;
  @tailwind utilities;
</style>

And import it into App.svelte:

<script>
  import TailwindCss from "./lib/TailwindCSS.svelte";
</script>

<TailwindCss />

However, while effective, this is not my preferred method. I prefer creating a separate file and importing it directly as a stylesheet. To do this, I create the tailwind.pcss file (I save it in the css folder for convenience):

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

Then I import the file in App.svelte:

<script lang="ts">
  import "./css/tailwind.pcss";
</script>

No need to import anything into the various components. I can add styles directly in the component

To preview the page, I use the command:

npm run dev

And to obtain compiled files, I use the command:

npm run build

I can also delete the app.css file and remove the reference from main.ts:

import App from "./App.svelte";

const app = new App({
  target: document.getElementById("app"),
});

export default app;