Vite with Laravel: Using Tailwind CSS

2021-03-22 #laravel #vite-with-laravel #frontend #build-tools #tailwind

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: {},
                  },
            },
    },
  });