vue.js で tailwind.css を webpack で使う設定メモ

はじめに

vue.js プロジェクトでデザインを sass で書いていたけどせっかくなので tailwind.css を使用してみる。
また *.vue 内で <style lang="scss"> も一応使えるようにしておく。

install

# webpack webpack-cli css-loader
npm install -D postcss@latest autoprefixer@latest
npm install tailwindcss@latest

touch postcss.config.js
npx tailwindcss init

設定

webpack.config.js を編集する。

module.exports = {
  ...
  module: {
    rules: [
      ...
      {
        test: /\.css/,
        use: [
          { loader: 'vue-style-loader' },
          { loader: "css-loader", options: { importLoaders: 1 } },
          { loader: "postcss-loader" }
        ]
      },
      ...
    ]
  },
  ...
}

postcss.config.js を以下に編集する。

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

tailwind.config.js を以下を追加する。

module.exports = {
  purge: [
    './src/**/*.html',
    './src/**/*.vue',
  ],
  ...
}

index.js で index.css を import する

/* index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

import "index.css"

その他

atomのtailwind.cssの補完
https://atom.io/packages/atom-tailwindcss