Web猫ブログ
Nuxt AdminにTailwind CSSを導入
Nuxt AdminにTailwind CSSを導入
04月 27日

Nuxt Adminとは

当ブログの問い合わせを管理するため、裏側の管理画面を自作、バックエンドに Firestoreを採用しています。ちなみに管理画面のフロントエンドでも Vue.jsのフレームワークの一つNuxt.jsを採用しています。

https://nuxtadmin.netlify.com/

ただし自分以外触れません

近く権限を追加した上で、閲覧用アカウントの開設を検討中。主な機能は、

  1. 技術ネタ・勉強会スライド一覧
  2. Qiita一覧(いいね管理をスマートに)
  3. 当ブログ解析結果一覧
  4. 搭乗ログ一覧

影響範囲は atoms所属のコンポーネント

結果は下記に示す通り。噂通り誰が見てもスタイルの見当が付きます。今回はこのコンポーネント群を Storybookで運用しながら、Nuxtで採用することを目標にしています。

https://github.com/jiyuujin/nuxt-admin-server/tree/master/components/atoms

<button
    class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded"
    @click="handleClick"
>
    {{ text }}
</button>

ひとまず事前に準備する

ちなみにこれまで element-uiを使っていました。競合の恐れがあるので削除しておきましょう。

yarn remove element-ui
yarn add tailwindcss

インストール後 tailwindcss.jsを作成します。

./node_modules/.bin/tailwind init tailwind.js

postcss.config.jsの中で以下の通り読み込めば事前準備は完了する、はずだった😅

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

これだけだと動かないの。。

ひとまず Storybookで動作することを目指します。当然ながら webpack周りを理解している必要がありますが、生憎私自身そこまで webpack周りの知見を持ち合わせていません。今回 vue-cliの puginの力を借りると、上手く動作するところまで到達しました!

yarn add @storybook/vue @storybook/addon-actions @storybook/addon-links @storybook/addon -D
yarn add @vue/cli-plugin-babel @vue/cli-plugin-eslint @vue/cli-service -D
yarn add node-sass sass-loader typescript -D

続いて Nuxtでも動作することを目指します。参考にできるリポジトリは極力参考にしましょう。

https://github.com/nuxt/nuxt.js/tree/dev/examples/with-purgecss

postcss-importなどを事前にインストール、 .postcssrc.jsの中で適当に設定をいじれば動きそう。結果的に動いたソースは以下の通りになりました!

module.exports = {
  plugins: [
    require('postcss-import'),
    require('postcss-url'),
    require('tailwindcss')('./tailwind.js'),
    require('autoprefixer')({
      cascade: false,
      grid: true
    }),
    require('postcss-preset-env')({
      stage: 0
    }),
    require('cssnano')({
      preset: 'default',
      discardComments: { removeAll: true },
      zindex: false
    })
  ]
}

ここに行き着くまでに、多くの warning発生に出くわしました。 Nuxt v2.4から extract-css-chunks-webpack-plugin が Nuxtの内部で使われるようになった関係から、Conflictが発生しているなどにも出くわしました。

https://github.com/webpack-contrib/mini-css-extract-plugin/issues/250#issuecomment-462751158

webpack周りに強くないのでハマった。。

こう思った次第です。ですが、これから慣れていくしかありませんので抵抗すること無く触っていきましょう! とくに OSSにコントリビュートされている方など、ほんとに尊敬に値します。

最後にレイアウトの指定を忘れない!

layoutsでページ全体のスタイル container mx-auto を設定し忘れないように。

<div class="container mx-auto">
  <nuxt/>
</div>

Netlifyにデプロイしています

Storybookは皆さまに見られるようにしています。昨日の kyoto.js #16 でも簡単に LTさせていただきました (当日は 30分前から全く準備できずゴメンなさい。。 計画的にということを痛感させられました)

https://j-stylebook.netlify.com/

余談ですが現時点で Nuxt/Storybookをモノリポで進めています。あえてパッケージ化して、管理画面以外の当ブログも同じパッケージを利用するために、リポジトリを分けても良かったのかもしれないですね。

コメントを残す

タイトル
メールアドレス
詳細

あわせてよみたい..

-----