Install tailwindcss in vue

York Chen

3 min readAug 17, 2020

1.用NPM或yarn安裝

# Using npm

npm install tailwindcss

# Using Yarn

yarn add tailwindcss

2.設定postcss.config.js

專案路徑:postcss.config.js

module.exports = {
    plugins: [
      require('tailwindcss'),
      require('autoprefixer')({
        grid: true,
        overrideBrowserslist: [
          '> 1%',
          'last 5 versions',
          'Firefox >= 45',
          'ios >= 8',
          'ie >= 10'
        ]
      })
    ]
  }

3.設定app.css

專案路徑:src\assets\style\app.css

@tailwind base;

@tailwind components;

@tailwind utilities;

4.設定 main.js

專案路徑:src\main.jsimport'@/assets/style/app.css'

5.設定 tailwind.config.js

專案路徑:tailwind.config.js

module.exports = {
  purge: [
    "./pages/**/*.vue", 
    "./views/*.vue", 
    "./components/**/*.vue", 
    "./plugins/**/*.vue",
    "./static/**/*.vue",
    "./store/**/*.vue"
  ],
  theme: {},
  variants: {},
  plugins: []
};