Nuxt.jsへtailwind cssを導入する

# はじめに
現在、自身で企画したサービスをNuxtで作っています。
その過程でtailwind cssを導入する機会があったので備忘録としてこちらにまとめます。

基本的には公式ドキュメントの通り実行しています。
[Install Tailwind CSS with Nuxt.js - Tailwind CSS](https://tailwindcss.com/docs/guides/nuxtjs)

#バージョン
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` をインストールします。

```jsx
npm install -D @nuxtjs/tailwindcss tailwindcss@latest postcss@latest autoprefixer@latest
```

## 1. package.jsonにtailwindcssがインストールされていることを確認
ちゃんと追加されています。
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230656/7d470e5b-3b29-cd7d-c5e6-7398066a0438.png)


## 2. nuxt.config.jsへ設定を追加する

下記を`nuxt.config.js`内の`buildModules`に追記。
（プロジェクト作成時にUIframeworkとしてtailwind cssを選択した場合はすでに記載されている可能性があります）

```jsx
'@nuxtjs/tailwindcss'
```

ここに追加。
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230656/928ad400-c261-421d-c3a8-dd9c795bee5f.png)


## 3. tailwind.config.jsを作成

ターミナルで下記コマンドを実行、`tailwind.config.js` をnuxt.config.jsと同じ階層に作成。

```jsx
npx tailwindcss init
```

成功すると下記記述のある`tailwind.config.js` が作成される。

```jsx
// 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内に下記を追加。

```jsx
'./components/**/*.{vue,js}',
'./layouts/**/*.vue',
'./pages/**/*.vue',
'./plugins/**/*.{js,ts}',
'./nuxt.config.{js,ts}',
```

最終的なコードは以下のようになっていればOK。

```jsx
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`

を作成する。

```jsx
（フォルダ階層）
nuxt_app
 - assets
   - css
     - tailwind.css
 - component
 - pages

...etc
```

## 6. tailwind.cssの編集

下記を`tailwind.css` に追記。

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

<br>
ここまでで大枠の設定は完了！

importを記述せずともcomponent, pagesでtailwind cssが使えるようになっている。

## 7. 早速試す。 pages/index.vueを編集

tailwind cssが適用されているか確認するため`index.vue` の<template>内へ下記の通り記載。

```jsx
<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。

![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230656/db22d527-c175-cd40-debd-6673b801ac64.png)


###補足
上記ChitChatには画像が設定されていません。
画像を追加したい場合は適宜追加してみてください！

# おまけ

tailwind cssは公式ドキュメントに豊富な見本コードがあります！
[Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.](https://tailwindcss.com/)

また、tailwind cssの最新機能などを運営の方がyoutubeで発信されてます！内容も面白い。
[Tailwind Labs](https://www.youtube.com/tailwindlabs)