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.jsmodule.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.jsexport 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
- Up and running
- Auto-refresh Blade views
- Using Tailwind CSS
- Using Vue.js
- Using React
- Using TypeScript
- Using Inertia.js