TailWind CSS カスタムプロパティ一覧 備忘録
- 06 Nov, 2024
TailWind CSS勉強中にダークモード実装のためにカスタムプロパティというものを学びました。
カスタムプロパティは以下のような形で使用できます。
global.css
@layer base {
:root {
/* ライトモードの色定義 */
--background: 255 255 255; /* 白 */
--text: 0 0 0; /* 黒 */
}
.dark {
/* ダークモードの色定義 */
--background: 0 0 0; /* 黒 */
--text: 255 255 255; /* 白 */
}
}
tailwind.config.js
// tailwind.config.js
module.exports = {
darkMode: 'class',
theme: {
extend: {
backgroundColor: {
hoge: 'rgb(var(--background))',
},
textColor: {
fuga: 'rgb(var(--text))',
},
},
},
};
html
<html class="dark">
<div class="bg-hoge">
<p class="text-fuga">Text</p>
</div>
</html>
ここで、backgroundColorのなかのhogeはbg-hoge、textColorのなかのfugaはtext-fugaになるといったように、決められているようです。
以下によく使うであろうリストを記します。
主なカスタマイズ可能なプロパティと接頭辞
-
backgroundColor:bg-- 背景色のカスタマイズ。
- 例:
bg-primary、bg-accent
-
textColor:text-- テキスト色のカスタマイズ。
- 例:
text-primary、text-muted
-
borderColor:border-- ボーダー（境界線）色のカスタマイズ。
- 例:
border-primary、border-accent
-
spacing:p-（padding）、m-（margin）- マージンとパディングのサイズカスタマイズ。
- 例:
p-7（パディング7ユニット）、m-8（マージン8ユニット）
-
borderRadius:rounded-- 角の丸み（ボーダー半径）をカスタマイズ。
- 例:
rounded-lg、rounded-custom
-
width/height:w-/h-- 幅と高さのカスタマイズ。
- 例:
w-72、h-80
-
fontSize:text-- フォントサイズのカスタマイズ。
- 例:
text-xl、text-2xl、text-custom
-
boxShadow:shadow-- ボックスシャドウのカスタマイズ。
- 例:
shadow-md、shadow-custom
-
opacity:opacity-- 透明度のカスタマイズ。
- 例:
opacity-75、opacity-90
-
zIndex:z-- Z軸のスタッキング順序（重なり順）のカスタマイズ。
- 例:
z-10、z-50
随時追加予定です。
