Come Aggiungere e Usare Tailwind con Svelte e Construct 3

Dopo aver ripreso a giocare con Svelte, TypeScript e Construct 3 è arrivato il momento di aggiungere al mio progetto di test anche Tailwind CSS. È un argomento che ho già affrontato nel 2021 (Tailwind CSS & Svelte) ma sono passati, per l’appunto, un po’ di anni. C’è un tutorial di LogRocket (How to use Tailwind CSS with Svelte) aggiornato a Luglio 2023 ma non presenta, a mio avviso, la soluzione migliore. Di conseguenza, ecco qui i miei appunti su come aggiungere Tailwind CSS a un progetto Svelte.

Riprendo il progetto del post di qualche giorno fa (questo) e mi porto con il terminale nella cartella con il codice di Svelte. Inserisco a terminale il seguente comando:

npm install -D tailwindcss@latest postcss@latest

In questo modo aggiungo a Svelte i pacchetti di Tailwind e PostCSS. Poi aggiungo Autoprefixer:

npm install -D autoprefixer@latest

E finalmente posso inizializzare Tailwind con il comando:

npx tailwindcss init -p

Questo comando crea due file:

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

Comincio con il modificare tailwind.config.js:

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

Aggiungo alcuni elementi a content per permettere a Tailwind di rimuovere gli stili CSS non usati dal progetto.

Modifico anche il file postcss.config.js:

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

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

Ho due modi per permettere a Svelte di usare gli stili di Tailwind. Il primo è di creare un componente TailwindCSS.svelte:

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

e di importarlo in App.svelte:

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

<TailwindCss />

Ma per quanto efficace non è il mio metodo preferito. Preferisco creare un file separato e importarlo direttamente come foglio di stile. Per farlo creo il file tailwind.pcss (per comodità lo salvo nella cartella css).

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

Poi importo il file in App.svelte:

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

Non è necessario importare nulla nei vari componenti. Posso aggiungere gli stili direttamente nel componente:

Per vedere l’anteprima della pagina uso il comando

npm run dev

Invece per ottenere i file compilati uso il comando:

npm run build

Posso anche eliminare il file app.css e togliere il riferimento da main.ts:

import App from "./App.svelte";

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

export default app;