Adding Tailwind CSS to a Svelte Project

Install Tailwind CSS

1. Install Tailwind CSS and its dependencies:

   npm install -D tailwindcss postcss autoprefixer
   

2. Create Tailwind and PostCSS configuration files:

   npx tailwindcss init tailwind.config.cjs -p
   

Configure Tailwind CSS

3. Update tailwind.config.cjs to specify the paths to all of your template files:

   /** @type {import('tailwindcss').Config} */
   module.exports = {
     content: [
       './src/**/*.{html,js,svelte,ts}'
     ],
     theme: {
       extend: {},
     },
     plugins: [],
   };
   

4. Add the Tailwind directives to your CSS:

   • Create a src/global.css file and add the following:

     @tailwind base;
     @tailwind components;
     @tailwind utilities;
     

Include Tailwind CSS in Your Project

5. Update your src/main.js to import the global CSS file:

   import './global.css';
   import App from './App.svelte';
   
   const app = new App({
     target: document.body,
     props: {
       name: 'world'
     }
   });
   
   export default app;
   

Use Tailwind CSS in Svelte Components

6. You can now use Tailwind CSS classes in your Svelte components:

   <script>
     export let name;
   </script>
   
   <style>
     /* Add component-specific styles here */
   </style>
   
   <div class="p-4 bg-blue-500 text-white rounded">
     Hello {name}!
   </div>
   

Build and Run the Project

7. Start the development server to see your changes:

   npm run dev