Vite Vanilla build with Tailwind doesn't work

Question

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: [],
}

Answer 1

You can follow these steps to resolve the issue:

Remove the code from your main.js file (part of Vite's template).
You may also want to remove the #app block from the styles.css (part of Vite's template).

Add the following line to your index.html :

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

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.

Vite Vanilla build with Tailwind doesn't work

Question

1 answers

solution1
1 2022-01-15 21:00:25

Vite Vanilla build with Tailwind doesn't work

Question

1 answers

solution1 1 2022-01-15 21:00:25

solution1
1 2022-01-15 21:00:25