Vite with Laravel: Using Tailwind CSS

Vite includes PostCSS support, so adding Tailwind doesn't require too much configuration.

First, install Tailwind and its peer dependencies postcss and autoprefixer.

{
"private": true,
"scripts": {
"dev": "vite",
"production": "vite build"
},
"devDependencies": {
+ "autoprefixer": "^10.0.2",
"axios": "^0.21",
"lodash": "^4.17.19",
+ "postcss": "^8.1.10",
+ "tailwindcss": "^2.0.1",
"vite": "^2.1.0",
"vue": "^3.0.7"
}
}

Next, all you need is are tailwind.config.js and postcss.config.js files.

// postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

If you'd rather not have a separate configuration file, you can inline the PostCSS configuration in vite.config.js.

// vite.config.js
export default ({ command }) => ({
base: command === 'serve' ? '' : '/build/',
publicDir: 'fake_dir_so_nothing_gets_copied',
build: {
manifest: true,
outDir: 'public/build',
rollupOptions: {
input: 'resources/js/app.js',
},
},
css: {
postCss: {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
},
},
});

Vite with Laravel