Add Tailwind CSS to an existing Svelte application.
This guide assumes you already have a Svelte application up and running. If not please follow the guide on how to create a new Svelte application first.
Start by running the following commands:
npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p
The latter of these commands will have created a tailwind.config.cjs
and postcss.config.cjs
file. Modify the content section of your tailwind config as follows:
{ content: ["./src/**/*.{html,js,svelte,ts}"], theme: { extend: {}, }, plugins: [], };
Add the tailwind directives to your main css file.
@tailwind base; @tailwind components; @tailwind utilities;
Finally, ensure you import the css file into your app before you build or run your application.
<script lang="ts"> import '../app.css'; </script>