CODEWITHSUNDEEP
javascripttailwind-cssvite
Martin Pilaszek
Martin Pilaszek

Reputation: 115

Vite Vanilla build with Tailwind doesn't work

I created a vanilla js project with Vite and installed Tailwind as the docs says. When I run in dev mode the classes works, but when I build the dist folder and serve that build it doesn't.

My postcss.config.js is this

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

And my tailwind config is this

module.exports = {
  purge: [
    './src/**/*.html',
    './src/**/*.js',
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Upvotes: 5

Views: 4124

Answers (1)

Sufian
Sufian

Reputation: 6555

You can follow these steps to resolve the issue:

  1. Remove the code from your main.js file (part of Vite's template).

  2. You may also want to remove the #app block from the styles.css (part of Vite's template).

  3. Add the following line to your index.html:

    <link rel="stylesheet" href="/style.css">

  4. Now in the <body>, you can use Tailwind like this:

    <div class="text-2xl">Hello, World!</div>

PS: thanks to this video (from 6:11 to 7:36) for the solution.

Upvotes: 6

Related Questions