Tailwind CSS に Prefix を追加する
1. はじめに
複数の CSS フレームワークを組み合わせて利用する場合,btn や nav などの使用頻度が高いクラス名が衝突することがあります。そのため,一部の CSS フレームワークでは,特有の Prefix を追加することで,衝突を回避しています。例えば,UIkit の uk- などが挙げられます。
しかし,デフォルトの Tailwind CSS では Prefix が追加されていません。そこで,本記事では Tailwind CSS に Prefix を追加する手順について記述します。また,以降の章で行っている作業は,以下の環境下で実行したものです。なお,npx はインストール済みの前提で記述しており,インストール手順は割愛していることをご了承ください。
- npx Ver.6.14.9
- Zorin OS 15.2 Core (Ubuntu 18.04 LTS)
2. 設定変更
まず初めに,Tailwind CLI を用いて,Tailwind CSS の設定ファイルである tailwind.config.js を生成します。
1$ npx tailwindcss-cli@latest init2$ ls3tailwind.config.js
次に,公式ドキュメントに従い,上記で生成した tailwind.config.js を以下のように書き換えます。tw- の部分を書き換えることによって,任意の Prefix を設定することが出来ます。
1module.exports = {2 prefix: 'tw-',3 purge: [],4 darkMode: false, // or 'media' or 'class'5 theme: {6 extend: {},7 },8 variants: {9 extend: {},10 },11 plugins: [],12}
最後に,ビルド処理を行い,tailwind.css を生成します。上記で行った設定が正常に反映されていれば,tw- が Prefix として追加された tailwind.css が生成されます。
1$ npx tailwindcss-cli@latest build -o tailwind.css2
3 tailwindcss 2.0.24
5 🚀 Building from default CSS... (No input file provided)6
7 ✅ Finished in 3.62 s8 📦 Size: 3.86MB9 💾 Saved to tailwind.css10
11$ ls12tailwind.config.js tailwind.css
3. 動作確認
動作確認用の index.html を生成し,以下のように書き換えます。その後,index.html を任意のブラウザで開き,黒背景に白文字が表示されれば正常に動作しています。
1$ touch index.html2$ ls3index.html tailwind.config.js tailwind.css
1<!doctype html>2<html lang="en">3 <head>4 <meta charset="UTF-8" />5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />6 <title>Document</title>7 <link href="tailwind.css" rel="stylesheet" />8 </head>9
10 <body class="tw-text-white tw-bg-black">11 Hello world12 </body>13</html>
4. おわりに
ここまで,Tailwind CSS に Prefix を追加する手順について記述してきました。Prefix を追加することで,クラス名の衝突を回避することが出来ます。しかし,出力される CSS のファイルサイズが増加する,HTML が冗長になるなどのデメリットもあるため,Prefix を追加する際は設計段階で慎重に検討する必要があります。