はじめに
現在、自身で企画したサービスをNuxtで作っています。
その過程でtailwind cssを導入する機会があったので備忘録としてこちらにまとめます。
基本的には公式ドキュメントの通り実行しています。
Install Tailwind CSS with Nuxt.js - Tailwind CSS
バージョン
nuxt/cli: 2.15.8
vue: 2.6.12
tailwindcss: 2.2.7
前提
Nuxtプロジェクト立ち上げ時のUI framework選択でnoneを選択している想定です。
もしtailwind cssを選択済みの方は0の工程は飛ばしてください。
0. tailwind cssのインストール
プロジェクトフォルダ内で下記コマンドを実行、tailwind css をインストールします。
npm install -D @nuxtjs/tailwindcss tailwindcss@latest postcss@latest autoprefixer@latest
1. package.jsonにtailwindcssがインストールされていることを確認
ちゃんと追加されています。
2. nuxt.config.jsへ設定を追加する
下記をnuxt.config.js内のbuildModulesに追記。
（プロジェクト作成時にUIframeworkとしてtailwind cssを選択した場合はすでに記載されている可能性があります）
'@nuxtjs/tailwindcss'
ここに追加。
3. tailwind.config.jsを作成
ターミナルで下記コマンドを実行、tailwind.config.js をnuxt.config.jsと同じ階層に作成。
npx tailwindcss init
成功すると下記記述のあるtailwind.config.js が作成される。
// tailwind.config.js
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
4. tailwind.config.jsの編集
tailwind.config.js のpurge内に下記を追加。
'./components/**/*.{vue,js}',
'./layouts/**/*.vue',
'./pages/**/*.vue',
'./plugins/**/*.{js,ts}',
'./nuxt.config.{js,ts}',
最終的なコードは以下のようになっていればOK。
module.exports = {
purge: [
'./components/**/*.{vue,js}',
'./layouts/**/*.vue',
'./pages/**/*.vue',
'./plugins/**/*.{js,ts}',
'./nuxt.config.{js,ts}',
],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
5. assets/css/tailwind.cssを作成
componentやpagesフォルダと同じ階層にassetsを作成、その配下にcss/tailwind.css
を作成する。
（フォルダ階層）
nuxt_app
- assets
- css
- tailwind.css
- component
- pages
...etc
6. tailwind.cssの編集
下記をtailwind.css に追記。
@tailwind base;
@tailwind components;
@tailwind utilities;
ここまでで大枠の設定は完了！
importを記述せずともcomponent, pagesでtailwind cssが使えるようになっている。
7. 早速試す。 pages/index.vueを編集
tailwind cssが適用されているか確認するためindex.vue の内へ下記の通り記載。
<template>
<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
<div class="flex-shrink-0">
<img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
</div>
<div>
<div class="text-xl font-medium text-black">ChitChat</div>
<p class="text-gray-500">You have a new message!</p>
</div>
</div>
</template>
<script>
export default {
}
</script>
8. 表示の確認
index.vueを確認して下記画像のように表示されていればOK。
補足
上記ChitChatには画像が設定されていません。
画像を追加したい場合は適宜追加してみてください！
おまけ
tailwind cssは公式ドキュメントに豊富な見本コードがあります！
Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.
また、tailwind cssの最新機能などを運営の方がyoutubeで発信されてます！内容も面白い。
Tailwind Labs