Tailwind CSS に Prefix を追加する

heroImage

1. はじめに

複数の CSS フレームワークを組み合わせて利用する場合，btn や nav などの使用頻度が高いクラス名が衝突することがあります。そのため，一部の CSS フレームワークでは，特有の Prefix を追加することで，衝突を回避しています。例えば，UIkit の uk- などが挙げられます。

しかし，デフォルトの Tailwind CSS では Prefix が追加されていません。そこで，本記事では Tailwind CSS に Prefix を追加する手順について記述します。また，以降の章で行っている作業は，以下の環境下で実行したものです。なお，npx はインストール済みの前提で記述しており，インストール手順は割愛していることをご了承ください。

2. 設定変更

まず初めに，Tailwind CLI を用いて，Tailwind CSS の設定ファイルである tailwind.config.js を生成します。

Terminal window
1
$ npx tailwindcss-cli@latest init
2
$ ls
3
tailwind.config.js

次に，公式ドキュメントに従い，上記で生成した tailwind.config.js を以下のように書き換えます。tw- の部分を書き換えることによって，任意の Prefix を設定することが出来ます。

1
module.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 が生成されます。

Terminal window
1
$ npx tailwindcss-cli@latest build -o tailwind.css
2


3
   tailwindcss 2.0.2
4


5
   🚀 Building from default CSS... (No input file provided)
6


7
   ✅ Finished in 3.62 s
8
   📦 Size: 3.86MB
9
   💾 Saved to tailwind.css
10


11
$ ls
12
tailwind.config.js  tailwind.css

3. 動作確認

動作確認用の index.html を生成し，以下のように書き換えます。その後，index.html を任意のブラウザで開き，黒背景に白文字が表示されれば正常に動作しています。

Terminal window
1
$ touch index.html
2
$ ls
3
index.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 world
12
  </body>
13
</html>

4. おわりに

ここまで，Tailwind CSS に Prefix を追加する手順について記述してきました。Prefix を追加することで，クラス名の衝突を回避することが出来ます。しかし，出力される CSS のファイルサイズが増加する，HTML が冗長になるなどのデメリットもあるため，Prefix を追加する際は設計段階で慎重に検討する必要があります。