【Rails】Tailwind CSS でカスタムCSS を作成・インポートする方法

最近、RailsでTailswindCSSを導入してみたのですが、思った以上に使い勝手が良い。

特に、カスタムコンポーネントでデザインを簡単に、自由自在に表現できる点は素晴らしいですね（さよなら、Bootstrap 笑）。

ところで、カスタムコンポーネントを作成する際は、application.tailwind.cssの@tailwind componets;以下に追加する形になるかと思います。

@tailwind base;
@tailwind components;
/* ここにカスタムコンポーネント（クラス）を作成する */
@tailwind utilities;

ただ、カスタムコンポーネントの量が多くなるとごちゃごちゃしてくるので、別途カスタムコンポーネント用のCSSファイルを作成して管理した方が分かりやすいのではないかと思った次第です。

そこで、今回はカスタムコンポーネント作成用のカスタムCSSを別途作成し、インポートする方法についてまとめました。

開発環境

カスタムコンポーネント用CSSを作成・インポートする方法

TailwindCSSの導入（$ rails new）

Railsアプリ新規作成時にTailwindCSSを事前インストールしておきます。

（既存のアプリにTailwindCSSを導入する方法については、またいつか書きたいと思います）

$ rails new myapp --css tailwind -j esbuild

TailwindCSSのコンパイルを自動化するため、-j esbuildオプションでesbuildもインストールしておきます。

新規作成されたアプリケーションフォルダの、app/assets/stylesheets以下を確認すると、application.tailwind.cssというファイルが自動生成されており、以下のような記述があります。

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

ここでTailwindCSSを読み込んでいるようです。

カスタムコンポーネント用CSS(custom.css)を新規作成

app/stylesheetsディレクトリ下にcustom.cssファイルを新規作成します。

ファイル名はなんでも良いですが、わかりやすい名前がおすすめです。

カスタムコンポーネントCSSをインポート

先ほど作成したcustom.cssを読み込むための記述をします。

application.tailwind.cssに以下の１行を追記します↓

@tailwind base;
@tailwind components;
/* ↓追記 */
@import "custom";
@tailwind utilities;

これで、custom.cssの内容がapplication.tailwind.cssに反映されるようになるはずです。

もし上記で反映されない場合は、以下のように書き換えるとうまくいくかと思います

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

以上です。