Vue-CLIでTailwind cssを導入する

トップ ― Vue-CLIでTailwind cssを導入する

投稿者 : TomoyaOkada

公開日:

更新日:

Vue-CLIでTailwind cssを導入する

Vue/Nuxt

目次


Vue-CLI v2で、Tailwind cssを使えるようにするまでの過程をご紹介します。

Tailwindをインストール

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9


configファイルの設定

npx tailwind init


このような中身のconfigファイルが生成されると思います。

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}


postcss.config.js の作成と設定

どちらかの方法で作成できます。

1.ターミナルで下記を叩く

touch postcss.config.js


2.エディタで直接ファイルを作成する

postcss.config.jsに下記の記述をしていきます。

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}


Tailwind cssを読み込む

src/assets/css/main.css

@Tailwind base;
@Tailwind components;
@Tailwind utilities;


最後に、main.jsにcssをインポートをして完了となります。

// tailewind css
import '@/assets/css/main.css';



記事をシェア

  • Twitter
  • FaceBook
  • hatena