vue cliでもtailwind.cssをセットアップできたのでメモしておく
環境
macos node -v v15.1.0 npm -v 7.0.8 vue --version @vue/cli 4.5.12 npm list vue vue@2.6.14 "postcss": "^7.0.35", "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.1.4",
※ vue3でも試したところうまく行った(vue@3.1.1)
参考資料
npmでビルドする方法を参考にさせていただきました https://tech.medpeer.co.jp/entry/better-tailwind-css
セットアップ手順
プロジェクト作成
vue create tailwind-app
cd tailwind-app
参考資料のように
Error: PostCSS plugin tailwindcss requires PostCSS 8.
これが後々でてきたので、tailwindに関わるインストールは以下を実行した
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
tailwind.config.js やpostcss.config.jsのファイルを作成。
npx tailwindcss init -p
このファイルが作成される。
// tailwind.config.js module.exports = { purge: [], darkMode: false, // or 'media' or 'class' theme: { extend: {}, }, variants: { extend: {}, }, plugins: [], }
ファイルを以下のように変更
// tailwind.config.js module.exports = { purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'], darkMode: false, // or 'media' or 'class' theme: { extend: {}, }, variants: { extend: {}, }, plugins: [], }
mkdir src/styles && touch src/styles/app.css
/* ./src/styles/app.css */ @tailwind base; @tailwind components; @tailwind utilities;
tailwindでビルドしたcssファイルをインポートする
// main.js(javascript) import { createApp } from 'vue'; import App from './App.vue'; import './styles/index.css'; // コレ createApp(App).mount('#app');
※ src/styles/index.cssを作成するには以下のようにする
// package.json "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint", "build:css": "tailwindcss build src/styles/app.css -o src/styles/index.css" // コレ },
// index.cssを作成 npm run build:css
App.vueを以下のようにする
<!-- App.vue --> <template> <div class="justify-center flex bg-yellow-300 items-center h-screen"> <div class="text-4xl"> Hello 👋🏼 </div> </div> </template> <script> export default { name: 'App', }; </script>
画面を表示させてみる
npm run serve