Setup TailwindCSS on Svelte & Snowpack

Installing TailwindCSS in a new Svelte project using Snowpack as the builder can be straightforward, though some online tutorials may lead you through unnecessary steps.

To simplify, keep the setup streamlined by excluding PostCSS or other complex build tools. Here’s a basic method to integrate TailwindCSS into a Svelte project using Snowpack.

First, install TailwindCSS with npm:

				
					npm install tailwindcss

Next, create a standard CSS file for TailwindCSS at src/tailwind.css with the following imports:

				
					@import 'tailwindcss/dist/base.css';
@import 'tailwindcss/dist/components.css';
@import 'tailwindcss/dist/utilities.css';

Then, open src/App.svelte (or your main layout component) and import this CSS file within the <script> tag:

				
					<script>
  import { onMount } from 'svelte';
  import './tailwind.css'; // highlight-line
  let count = 0;
  ...
</script>

And that’s it! Now you can freely use TailwindCSS classes throughout your project, with the added benefit of Snowpack’s instant hot reloading.

Mohamed Abbas

Technical Lead | Magento Architect