Skip to content

chrisdhanaraj/svelte-tailwind-integration

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Tailwind / Svelte Demo integration

Hi! This is a quick repo demonstration that shows how to quickly and painlessly integrate Tailwind into the Svelte pipeline, no additional scripts required! The main concept is that you'll need to leverage the postcss plugins that Tailwind uses directly, instead of relying on the Tailwind CLI.

Then, use a global style block to import in Tailwind postcss plugins (check out src/App.svelte) to bring in Tailwind!

Steps

Add Dependencies

yarn add -D tailwindcss autoprefixer svelte-preprocess

Setup rollup config

Check out the rollup.config.js for the full setup, but it's just plucked from the tailwindcss Getting Started walkthrough!

1. Add the following blocks into your rollup.config

const preprocess = sveltePreprocess({
  sourceMap: !production,
  postcss: {
    plugins: [
      require("tailwindcss"),
      require("autoprefixer"),
    ],
  },
});

2. Add preprocess into the svelte rollup plugin

plugins: [
  svelte({
    ...
    preprocess
  })
]

3. Add a <style global> block that references Tailwind

In this example, I've added this block to the src/App.svelte component.

Important

In an actual app, put this block in a file that will not change. Tailwind has relatively fast incremental builds, but the initial build goes through the entire 3mb+ worth of Tailwind CSS and is quite slow.

<style global>
  /* purgecss start ignore */
  @tailwind base;
  @tailwind components;
  /* purgecss end ignore */
  @tailwind utilities;
</style>

4. Done!

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published