❌️tailwind.config.js
Tailwind CSS v4.0から不要になった
docs
tailwindcss/defaultConfig.stub.js at master · tailwindlabs/tailwindcss · GitHub
defaultのtailwind.config.jsの中身
mode
content
https://tailwindcss.com/docs/content-configuration
https://tailwindcss.com/docs/configuration#content
tailwindの対象となるファイルのpathを記述する感じかな
code:js
content: [
'./app/**/*.{ts,tsx}',
'./src/components/**/*.{ts,tsx}',
'./src/features/**/components/**/*.{ts,tsx}',
],
tailwind.config.jsのtheme
plugins
提供されているpluginsを追加する
Tailwind CSSのplugins
https://tailwindcss.com/docs/plugins
corePlugins
Tailwind CSSの既存のルールを無効にする時に使う
presets
https://tailwindcss.com/docs/configuration#presets
Tailwindの基底の基本構成の代わりの、独自の基本構成を指定する
うーんよくわからん #??
pluginsとの違いがわからない
pluginsはあくでもあたらしく追加するだけか
コンフリクトした場合はどうなるんだろう
Tailwind CSSのdirectivesもわかっていないのもある
@tailwind base;を書かなければ良いんじゃない?という気もする
なぜわざわざpresetsという項目が必要になるのかがわからない
prefix
https://tailwindcss.com/docs/configuration#prefix
全てのルールに対して特定のprefixを付ける
もともとCSSを使っているプロジェクトに後からTailwindを導入したときなどに、コンフリクトを避けるために使う
important
https://tailwindcss.com/docs/configuration#important
tailwindの全ての指定に対し、!importantを付ける
これも、CSSで運用しているプロジェクトに後からTailwindを導入したときに使うものだろうか
でも、外部libraryでcssを読み込んでいる時も必要になる場合はありそうか
separator
https://tailwindcss.com/docs/configuration#separator
hoverとかfocusとかと区切る文字を指定する
たぶんdefaultは: