[Svelte] Using TailwindCSS on Svelte

TailwindCSS is my favorite CSS framework.

Let's use TailwindCSS on Svelte.

Create an Application

Create a svelte application via a template.

Please see Create an Application section on the below post.

2021.09.14 - [Web/Etc] - [Svelte] Getting Started with VSCode

Add TailwindCSS

Add dependencies for TailwindCSS.

$ yarn add -D tailwindcss postcss autoprefixer
or
$ npm install -D tailwindcss postcss autoprefixer

Configure TailwindCSS

Create a default config file.

$ npx tailwindcss init

Then, the tailwind.config.js file would be created.

Let's modifies it.

 

tailwind.config.js

const production = !process.env.ROLLUP_WATCH;
module.exports = {
  purge: {
    content: ["./src/**/*.svelte"],
    enabled: production, // disable purge in dev
  },
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
  future: {
    purgeLayersByDefault: true,
    removeDeprecatedGapUtilities: true,
  },
};

 

In addition, we need to modify the rollup configuration.

 

rollup.config.js

svelte({
  preprocess: sveltePreprocess({
    sourceMap: !production,
    postcss: {
      plugins: [require("tailwindcss"), require("autoprefixer")],
    },
  }),
  ...
}),

 

Please find and modify the code like the above code.

Use TailwindCSS

Now, let's use TailwindCSS!

 

src/App.svelte

<script lang="ts">
  export let name: string;
</script>

<main class="container mx-auto p-4 text-center">
  <h1 class="text-4xl font-bold text-red-600 uppercase">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 global lang="postcss">
  @tailwind base;
  @tailwind components;
  @tailwind utilities;
</style>

 

Run and access our application.

$ yarn dev
or
$ npm run dev

http://localhost:5000/

Conclusion

In this posting, we took a look at how to add TailwindCSS to Svelte application.

You can more easily decorate your application now.