勉強履歴

プログラミング初心者のメモ書きです

Tailwind Cssの導入方法

久しぶりのブログ投稿になってしまいました。 現在、ポートフォリオを鋭意制作中です。

タイトルにもあるように、ここ数日は Tailwind Cssポートフォリオで使おうとインストールしてました。 忘備録として残しておきます。

1. yarnでインストールする

CDNで取り込むやnpmでインストールする方法もありますが、 今回はyarnで行いました。

yarn add tailwindcss@latest postcss@latest autoprefixer@latest

2. Tailwind Cssの設定を行う

今回はapp/javascriptディレクトリの下にcssディレクトリを作って、 そこにtailwind.config.jsを置くことにしました。

cd app/javascript/css
yarn tailwindcss init

作成されたtailwind.config.js

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

3.postcss.config.jsの設定変更

ホームディレクトリにあるpostcss.config.jsに以下の記述を加えます。

module.exports = {
  plugins: [
    require('tailwindcss')('./app/javascript/css/tailwind.config.js'),
    require('autoprefixer'),
  ]
}

4.tailwind.cssを作成してビルド

cssディレクトリ内にtailwind.cssを作成して次のように記載しました。

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

その後、次のコマンドでビルドしました。

yarn tailwind build ./app/javascript/css/tailwindcss.css ./app/javascript/css/tailwindcss_dev.css

長いので、package.jsonのscriptを利用することでコマンドを省略することができます。

  "scripts": {
    "dev-css": "tailwind build ./app/javascript/css/tailwindcss.css ./app/javascript/css/tailwindcss_dev.css"
  }


私の場合はビルドしようとした時にpostcss plugin autoprefixer requires postcss 8というエラーが出てしまいました。 エラーが出た時点でのpackage.json

"dependencies": {
    "autoprefixer": "^10.3.1",
    "postcss": "^8.3.5",
    "tailwindcss": "^2.2.4",
  },

postcss8は入っているはずなのですがエラーが出てしまったので、tailwindcssも含めて互換性のあるバージョンに落としました。

yarn add tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

5. 実際に画面を表示させる

次のファイルにそれぞれ以下の記述を追記することでTailwind Cssが使えるようになります。 app/javascript/packs/application.js

 import '../css/tailwind.css';

app/views/layouts/application.html.erb

<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

後は、自分の表示させたいページのclassにUtilityクラスを書いていけばOKです。 実際にページを実装していくことを考えると、tailwind.config.jsの中身を色々と設定していく必要がありますが、 長くなりそうなので今回のメモはここまでにします。

ちなみにTailwind Cssを使ってみようとした理由は以下の3つです。 ①好奇心 ②流行りらしいから ③名前が自分の作ろうとしているポートフォリオのイメージと合っている(?)

参考にしたサイト

tailwindcss.com

tailwindcss.com

Rails6でTailwind CSSを使ってみる