Svelte and Tailwind quick project set up

New Svelte project

pnpm create svelte@latest APPNAME
cd APPNAME
pnpm install
code .
pnpm run dev

Install tailwind

pnpm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Tailwind Setup

1. Configure template paths

   Add the paths to all of your template files in your tailwind.config.js file.

   tailwind.config.js

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

2. Add the Tailwind directives to your CSS

   Create a ./src/app.css file and add the @tailwind directives for each of Tailwind’s layers.

   app.css

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

3. Import the CSS file

   Create a ./src/routes/+layout.svelte file and import the newly-created app.css file.

   +layout.svelte

   <script>
     import "../app.css";
   </script>
   
   <slot />

⇦ back to all notes