Zenn
🐯

Tailwind CSS(-v3)の導入

2022/11/16に公開
Rails
Ruby
Tailwind CSS
daisyUI
tech

daisyUIを使うために、Tailwind CSS(-v3)の導入

daisyUIを使うには、Node.js と Tailwind CSS の導入が必要で、Tailwindの導入とファイルのおき場所に手こずりました。備忘録としてまとめます。

・使用

ruby 3.1.2
rails 6.1.6
node 16.0.0(インストロール済み、指定があり設定途中でアップデート)

はじめに

PostCSSのプラグインとしてTailwindをインストールする
(PostCSSは、プラグインされたCSSを解析し、処理効率の良いCSSを新たに出すもので、良いらしかったから)

インストールを進めていく！

$ npm install -D tailwindcss postcss autoprefixer

tailwindcssに関係するファイルが生成される

  • node_modules
  • package.json
  • package-lock.json

package.jsonのdevDependencies以下に"autoprefixer","postcss","tailwindcss"が記述される

package.json
~~~
  "devDependencies": {
    "autoprefixer": "^9.8.8", 
    "postcss": "^8.4.19",
    "tailwindcss": "^3.2.4",
    "webpack-dev-server": "^3"
  },

設定ファイルの生成

$ npx tailwindcss init -p

以下のファイルが生成される
① tailwind.config.js
② postcss.config.js

①tailwind.config.jsに設定を書く

→　content内に、どこのファイルにTailwindを反映させたいかを設定できる
(自分はviewsディレクトリ以下の全部のファイルに反映させたかった↓)

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
  './app/views/**/*.html.erb',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

// ** は複数のファイルを表す
//  * は一つのファイルを表す

②postcss.config.jsにプラグインを記述

PostCSSにプラグインするtailwindcssとautoprefixer を記述する

postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

出力ファイルの作成

cssとして最終的に使うファイルのこと↑
TailwindCSSをPostCSSを使ってインストールしていく

1.taillwindの呪文ファイルを作成

ファイル名は任意で付けて、「〇〇.css」のファイルを作成し、Tailwind cssを記述する
自分はtailwind_input.cssにした。

tailwind_input
@tailwind base;
@tailwind components;
@tailwind utilities;

黄色のニョロニョロが出る(cssのバリデーション)ので、拡張機能のPostCSS Language Supportをインストールすると消える

※htmlにcssをリンクで書く時は　<link rel="stylesheet" href="〇〇.css">のherfには直接入らないファイル。(herfにはビルド後のCSSファイルが使われる)

2.出力されるファイルを作成

PostCSSを使ってtaillwindの呪文ファイルをビルドすると、新しいCSSファイルが出力される。
なので、taillwindのCSSが出て欲しいところに出力ファイルを作る。
(こちらもファイル名は任意で付ける)

自分は全体のhtmlに使われてほしいので、app/assets/stylesheetsディレクトリ以下にtailwind_dist.cssを作った。(ビルド後のファイル名として、よくdistが付けられる。)

  • このcssファイルは、コンパイル後に自動で記述されるので空のままでOK

※htmlにcssをリンクで書く時は　<link rel="stylesheet" href="〇〇.css">のhrefに入るファイル

3.package.jsonにビルド文を記述

まず、"scripts"内のtest文を削除する

package.json
　　　　　　　　　},
     "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"  // ←削除
  },

代わりに、"dev": "tailwindcss -i 〇〇.css -o 〇〇,css --watch"を記述する。

  • -i の後ろは、インストール対象ファイル名
    (1.で作成した　@tailwind達を書いたファイル）

  • -o の後ろは、アウトプットするファイル名
    (2.で作成した　ビルド後のCSSファイル。@tailwindをビルドした結果が出力されるファイル)

package.json
  "devDependencies": {
    "autoprefixer": "^9.8.8",
    "postcss": "^8.4.19",
    "tailwindcss": "^3.2.4",
    "webpack-dev-server": "^3"
  },
  "scripts": {
    "dev": "tailwindcss -i tailwind_input.css -o app/assets/stylesheets/tailwind_dist.css --watch"
  }

4.ビルドコマンドを実行する

$ npm run dev

tailwind_dist.cssに2500行以上の文が自動で生成されている.
control + Cで実行中の処理を停止できる

おさらい

tailwind_input.cssを作成(tailwindの内容が書いてある)
↓
package.jsonを修正(ビルドコマンド文を記述する)
↓
npm run devを実行(ターミナルコマンドでpackage.jsonに書いたことを実行する)
↓
tailwind_dist.cssが出力される(PostCSSによってビルドされたtailwindCSSが記述される)

hrmlで確認

htmlファイルに、 <button class="bg-green-400 hover:bg-green-300 text-white rounded px-4 py-2">Green 400</button>を書くと緑のボタンがでる！
(※npm run devとrails sをしてからできた。macに直接パスのコピペでは反映されなかった)

反映されていない時の確認

  • application.cssに関わらない位置に出力cssファイルを設置した時は、 <link rel="stylesheet" href="〇〇.css">のherfのパスが正しいか見る
  • tailwind.config.jsのconent内のパスが正しいか見る
  • 'npm run dev'をする

tailwindの公式リンク
PostCSSの参考リンク
tailwindの参考リンク
tailwindの参考リンク

最後に

はじめての技術ブログ投稿でした。
tailwindの導入することができた嬉しさと、苦戦して辛かったので、
私も誰かの足しになることができたら、、と思い書きました。👀
思ったよりも時間がかかった！
他の記事も数時間かけて書かれているんだと分かりました🙇‍♂️
ありがとうございました。

Discussion