Quickly set up tailwind for a svelte app

If you’re here you probably have a svelte app you want to use Tailwind in... This is a quick guide but still, before we do, make sure you have Node installed (version 14 or above ) on your machine.
check your node version by running the following command on your terminal.

node -v

you should see a version number like

v18.17.0

If you don’t find node installed or maybe a lower version, head to the NodeJS website, download and install the LTS version

Setting Tailwing…

To set up Tailwind for Svelte, open your terminal and run the following command in the root directory of your app (the same level where you have package.json) to install TailwindCSS and its peer dependencies:

npm install -D tailwindcss@latest postcss@latest

For Tailwind to work, it needs two config files,tailwind.config.js and postcss.config.js. Run the following command to generate these files with some pre-configuration already

npx tailwindcss init -p

Now replace everything (or add ) in the tailwind.config.js file with the following

/** @type {import('tailwindcss').Config} */

export default {
  plugins: [],
  content: [],
  theme: {
    extend: {},
  },
  purge: ["./index.html", './src/**/*.{svelte,js,ts}'], // to clean up unused CSS
  variants: {
    extend: {},
  },
}

You can add your own tailwind configurations if you want.

Now move to your project’s src directory, and create a TailwindCSS.svelte file. Add the following to that file to initiate Tailwind’s base, components, and utilities.

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

The global keyword means the style should be applied globally in our app

Now import the TailwindCSS.svelte file into the script tag of your +layout.svelte file to initiate tailwind like so

<script>
    import '../TailwindCSS.svelte';
    // your other imports
</script>

Kill your serve with cntrl + c and restart it with npm run dev or the main script in your package.json to restart your app.

you should be able to use Tailwind to style your components now.

If this doesn’t work, try importing tailwind like so

<script>
    import TailwindCss from '../TailwindCSS.svelte';
    // your other imports
</script>

And call it in your app just right after the script tag like so...

<TailwindCss />

Thank you for reading this far, I hope you found this helpful. leave a few claps👏🏾 and do follow me on Twitter