Svelte template with Tailwind CSS

Table of contents

• Installation
• Get started
  • Production mode
  • Using TypeScript
• Donations

Install Tailwind CSS with Svelte

Setting up Tailwind CSS in a Svelte project.

1. Install necessary dependencies:

   npm i -D svelte-preprocess tailwindcss postcss autoprefixer
   

2. Run the init command to generate the tailwind.config.js file:

   npx tailwindcss init
   

3. Configure svelte-preprocess in your rollup.config.js file:

   // ...
   import sveltePreprocess from 'svelte-preprocess'
   
   // ...
   
   export default {
     // ...
     plugins: [
       svelte({
         // ...
         preprocess: sveltePreprocess({
           sourceMap: !production,
           postcss: {
             plugins: [require('tailwindcss')(), require('autoprefixer')()],
           },
         }),
       }),
       // ...
     ],
     // ...
   }
   

4. Add the Tailwind directives to your App.svelte:

   <script>
     export let name;
   </script>
   
   <main>
     <h1>Hello {name}!</h1>
     <p> Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
   </main>
   
   <style lang="postcss" global>
     @tailwind base;
     @tailwind components;
     @tailwind utilities;
   </style>
   

5. Finally, add the paths to all of your template files in your tailwind.config.js file:

   module.exports = {
     content: ['./public/index.html', './src/**/*.svelte'],
     theme: {
       extend: {},
     },
     plugins: [],
   }
   

Get started

Install the dependencies...

npm install

...then start Rollup:

npm run dev

Building and running in production mode

npm run build

Using TypeScript

This template comes with a script to set up a TypeScript development environment, run:

node scripts/setupTypeScript.js

Donations