フロント

Tailwind on Nuxt(導入編)

Tailwind on Nuxt(導入編)

Tailwind と Bootstrap

Tailwind CSSはHTML要素のclassに決まった名前をつけるとライブラリのcssが適用されるという点では
Bootstrapと同じで、コードの書き方は一緒?と言えます。
ただ、Bootstrapと違うのは自由度が高く、基本形みたいなものが無いです。
基本色とサイズと位置くらい決めてOKだったBootstrapと異なり、
ボーダーをどうするか色の強さやら形の丸みやら色々と細かく指定しなきゃいけません。
なので、Tailwindのclass名はめちゃ長です。
以下リンクで同じUIをそれぞれで作るコードがあり違いが分かりやすいので、是非見てください。
Tailwind CSS vs Bootstrap

色々な補助サイト

Tailwindを使う場合はCSSに詳しくなり、UI部品を作るのに一つ一つCSS要素を考えなければならないのか。
いやいや私はちょっとBootstrapっぽさから脱却したいだけで、そんなに頑張りたくはないのです。
やはり世の中には便利なコピペできるコードのあるサイトがたくさんあり、UI部品リストもザラに出てきます。
これをちょっとだけ変えれば、オリジナリティの出来上がり???以下2サイトだけでもだいぶ色々あります。
Tailwind Components
Tailwind Elements

nuxt.jsにTailwindを導入方法

nuxt.jsのデフォルト画面がlocalで表示されている前提で話を進めます。

1. tailwindcssと関連のパッケージを以下でインストール

@ cd my_project
npm install -D tailwindcss postcss@latest autoprefixer@latest @nuxt/postcss8

2. tailwind.config.jsの作成

@ cd my_project
npx tailwindcss init

3. nuxt.config.jsにbuildModulesにpostcss8を、postcssにtailwindcssとautoprefixerを追加

(nuxt.config.js)
export default {
　　　buildModules: [
　　　　　'@nuxt/postcss8',
　　　　　// ...
　　　],
}
(nuxt.config.js)
export default {
  build: {
    postcss: {
      plugins: {
        tailwindcss: {},
        autoprefixer: {},
      },
    },
  }
}

4. 2で作成したtailwind.config.jsにnuxt.jsで使用するテンプレートのパスを追加

(tailwind.config.js)
module.exports = {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./nuxt.config.{js,ts}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

5. ./assets/css/main.cssを作成し、そのファイルに@tailwindディレクティブを追加する。

(main.css)
@tailwind base;
@tailwind components;
@tailwind utilities;

6.nuxt.config.jsにmain.cssを読み込ませて、npm run dev

(nuxt.config.js)
export default {
  css: [
    '@/assets/css/main.css',
  ],
}
@ cd my_project
npm run dev

これでTailwind CSSが使えるようになりました。
Index.vueなどにTailwindのサンプルをコピペしてみて動くかどうか試してください。
以下公式の通りです、今度は使い方など解説できるように、もう少々慣れてみます。

Install Tailwind CSS with Nuxt.js

おすすめの記事