tailwindでは以下のCSSを読み込ませて使います。この三つがベースとなって追加が必要であれば、開発者がここに設定していくことになります。
|
1 2 3 |
@tailwind base; @tailwind components; @tailwind utilities; |
@tailwind base
normalize.cssというファイルで定義されています。クロスブラウザにHTMLのデフォルトスタイルになります。（要は、ChromeやFirefoxなど各ブラウザによってデフォルトのスタイルが異なってくるので統一しましょうという思想にもとに作られたファイル）、Preflightとも呼ばれます。
なので、tailwindを使う上では一昔前だと意識してやっていたreset.cssなどは意識せずに実装することが可能になるのです。
以下の場所に格納されています。
|
1 |
node_modules/tailwindcss/dist/base.css |
@tailwind components
ユーティリティパターン（ユーティリティクラスの集合）です。以下の場所に格納されています。containerしか含まれていません。
|
1 |
node_modules/tailwindcss/dist/components.css |
以下のように指定すれば独自のユーリティティパターンを追加することが可能です。
|
1 2 3 4 5 6 7 8 9 |
@layer components { .card { background-color: theme('colors.white'); border-radius: theme('borderRadius.lg'); padding: theme('spacing.6'); box-shadow: theme('boxShadow.xl'); } /* ... */ } |
@tailwind utilities
ユーティリティクラス群(w-4、m-4など)です。以下の場所に格納されています。17万行もの莫大な行数になってます。
|
1 |
node_modules/tailwindcss/dist/utilities.css |
また、公式サイトには記載がありますが以下のように指定すれば独自のユーティリティクラスを追加することは可能です。
|
1 2 3 4 5 6 |
@tailwind utilities; @layer utilities { .content-auto { content-visibility: auto; } } |
この記事へのコメントはありません。