Tailwindをv3.x系からv4.x系へアップグレードする
作成日
更新日
コマンド一つで
npx @tailwindcss/upgrade@nextv3系からしか実行はできない。
が、v3からもうまくいかなかった...tailwind.config.ts が複雑すぎるって。
変数
v3.xでは動いていた。
@layer base {
:root {
--main-text: #3c444d;
--main-background: #f8f8fc;
--secondary-background: #e8ecf3;
}
}@theme の中に書かないと動かないし--colorをつけないと動かない。
@theme {
--color-accent: var(--accent);
--color-accentLight: var(--accent-light);
--color-marker: var(--marker);
--color-background: var(--main-background);
--color-secondaryBackground: var(--secondary-background);
--color-thirdBackground: var(--third-background);
--color-mainText: var(--main-text);
--color-subText: var(--secondary-text);
--color-dark: var(--dark);
--color-grayText: var(--gray-text);
--color-whiteGray: var(--white-gray);
--color-lavender: var(--lavender);
--color-nav1: var(--nav1);
--color-nav2: var(--nav2);
--color-nav3: var(--nav3);
--color-nav4: var(--nav4);
--color-red: var(--red);
--color-warning: var(--warning);
/* フォント */
--font-karuBold: "Karu-Bold", "sans-serif";
--font-karuBoldItalic: "Karu-BoldItalic", "sans-serif";
--font-karuRegular: "Karu-Regular", "sans-serif";
--font-mplusRegular: "MPlus-Regular", "sans-serif";
--font-mplusMedium: "MPlus-Medium", "sans-serif";
/* animation */
--animate-fadein: fadein 0.3s ease-out;
--animate-fadeout: fadeout 0.3s ease-out;
@keyframes fadein {
0% { opacity: "0" };
100% { opacity: "1" };
}
@keyframes fadeout {
0% { opacity: "1" };
100% { opacity: "0" };
}
}また tailwind.config.ts内の設定は削除していい。
theme: {
extend: {
/* 丸っと削除
colors: {
accentLight: "var(--accent-light)",
marker: "var(--marker)",
},
*/使う側
<div className="bg-dark"></div>
<p className="font-mplusMedium></div>https://tailwindcss.com/docs/theme
背景
<div className="bg-(image:--theme-icon)"></div>tailwind.config.ts 内の設定は削除
theme: {
extend: {
/* 削除
backgroundImage: {
theme: "var(--theme-icon)",
},
*/
},
},https://tailwindcss.com/docs/theme
プラグイン
globals.css
@plugin "tailwind-scrollbar";tailwind.config.ts 内の設定は削除
// import scrollbar from "tailwind-scrollbar";
/* 削除
plugins: [
writingMode,
scrollbar,
], */カスタムプラグイン
v4.x
@layer components {
.shadow-card {
box-shadow: 8px 8px #0a5f77;
}
.shadow-bottom-menu {
box-shadow: 4px 4px #0a5f77;
}
.writing-vertical-rl {
writing-mode: vertical-rl;
}
.writing-vertical-lr {
writing-mode: vertical-lr;
}
.writing-horizontal-tb {
writing-mode: horizontal-tb;
}
}v3.x の tailwind.config.tsの方は削除する。
const writingMode = plugin(({ addUtilities }: PluginAPI) => {
addUtilities({
".writing-vertical-rl": {
writingMode: "vertical-rl",
},
".writing-vertical-lr": {
writingMode: "vertical-lr",
},
".writing-horizontal-tb": {
writingMode: "horizontal-tb",
},
});
});
~~
plugins: [
writingMode,
scrollbar,
],safelist
// だめ
<div class="text-{{ error ? 'red' : 'green' }}-600"></div>
// 完全な名前ならおｋ
<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>https://tailwindcss.com/docs/theme
tailwind.config.ts
最終的にv4.x系では書くことなくなった。 削除した。 -> 削除したらVSCodeのサジェストがされなくなった。
In order for the extension to activate you must have <code>tailwindcss</code> installed and a Tailwind config file named
tailwind.config.{js,cjs,mjs,ts,cts,mts}in your workspace. https://github.com/tailwindlabs/tailwindcss-intellisense
削除せず残しておく。
tailwind.config.ts
import { type Config } from "tailwindcss";
export default {
content: [
"./src/**/*.{ts,tsx,js,jsx}",
]
} satisfies Config;参考
公開日
更新日