From 29b415d65a55a34778bd54d2d1c4231455fb2403 Mon Sep 17 00:00:00 2001 From: WK Date: Wed, 23 Jul 2025 01:09:45 +0800 Subject: [PATCH] chore(docs): formatting + supplement tw upgrade (#5492) * chore(docs): formatting * chore(docs): formatting * fix(docs): remove extra semicolon * chore(docs): supplement TW4 upgrade content * chore(docs): remove duplicate content * chore(docs): add missing semicolons --- apps/docs/content/docs/frameworks/nextjs.mdx | 4 ++-- apps/docs/content/docs/frameworks/remix.mdx | 2 +- apps/docs/content/docs/frameworks/vite.mdx | 2 +- apps/docs/content/docs/guide/installation.mdx | 10 ++++----- apps/docs/content/docs/guide/tailwind-v4.mdx | 21 ++++++++++++------- apps/docs/tailwind.config.js | 2 +- 6 files changed, 23 insertions(+), 18 deletions(-) diff --git a/apps/docs/content/docs/frameworks/nextjs.mdx b/apps/docs/content/docs/frameworks/nextjs.mdx index 01d3e747d..ef02e44e5 100644 --- a/apps/docs/content/docs/frameworks/nextjs.mdx +++ b/apps/docs/content/docs/frameworks/nextjs.mdx @@ -197,7 +197,7 @@ and add the following code to your main css file: @plugin './hero.ts'; /* Note: You may need to change the path to fit your project structure */ @source '../../node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}'; -@custom-variant dark (&:is(.dark *)) +@custom-variant dark (&:is(.dark *)); ``` ### Setup Provider @@ -437,7 +437,7 @@ and add the following code to your main css file: @plugin './hero.ts'; /* Note: You may need to change the path to fit your project structure */ @source '../../node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}'; -@custom-variant dark (&:is(.dark *)) +@custom-variant dark (&:is(.dark *)); ``` ### Setup Provider diff --git a/apps/docs/content/docs/frameworks/remix.mdx b/apps/docs/content/docs/frameworks/remix.mdx index 70f6e7660..e3812a1e6 100644 --- a/apps/docs/content/docs/frameworks/remix.mdx +++ b/apps/docs/content/docs/frameworks/remix.mdx @@ -170,7 +170,7 @@ and add the following code to your main css file: @plugin './hero.ts'; /* Note: You may need to change the path to fit your project structure */ @source '../../node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}'; -@custom-variant dark (&:is(.dark *)) +@custom-variant dark (&:is(.dark *)); ``` ### Provider Setup diff --git a/apps/docs/content/docs/frameworks/vite.mdx b/apps/docs/content/docs/frameworks/vite.mdx index 44b052556..979c33362 100644 --- a/apps/docs/content/docs/frameworks/vite.mdx +++ b/apps/docs/content/docs/frameworks/vite.mdx @@ -184,7 +184,7 @@ and add the following code to your main css file: @plugin './hero.ts'; /* Note: You may need to change the path to fit your project structure */ @source '../../node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}'; -@custom-variant dark (&:is(.dark *)) +@custom-variant dark (&:is(.dark *)); ``` ### Provider Setup diff --git a/apps/docs/content/docs/guide/installation.mdx b/apps/docs/content/docs/guide/installation.mdx index 5adc4b8fb..288dd94cb 100644 --- a/apps/docs/content/docs/guide/installation.mdx +++ b/apps/docs/content/docs/guide/installation.mdx @@ -174,11 +174,11 @@ export default heroui(); and add the following code to your main css file: ```css - @import "tailwindcss"; - @plugin './hero.ts'; -// Note: You may need to change the path to fit your project structure - @source '../../node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}'; - @custom-variant dark (&:is(.dark *)) +@import "tailwindcss"; +@plugin './hero.ts'; +/* Note: You may need to change the path to fit your project structure */ +@source '../../node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}'; +@custom-variant dark (&:is(.dark *)); ``` #### Provider Setup diff --git a/apps/docs/content/docs/guide/tailwind-v4.mdx b/apps/docs/content/docs/guide/tailwind-v4.mdx index e64fc36cf..8f122bc24 100644 --- a/apps/docs/content/docs/guide/tailwind-v4.mdx +++ b/apps/docs/content/docs/guide/tailwind-v4.mdx @@ -34,25 +34,27 @@ TailwindCSS v4 is now available since 2.8.0! This guide will help you migrate yo Since Tailwind v4 favors a CSS-first approach, `tailwind.config.js` will not be required. -Create `hero.ts` file +Create `hero.ts` file to export `heroui` plugin. ```tsx // hero.ts import { heroui } from "@heroui/react"; +// or import from theme package if you are using individual packages. +// import { heroui } from "@heroui/theme"; export default heroui(); ``` -Update your main css file +Update your main css file as below -```diff-js -// your main css file +```diff-css +/* your main css file */ - @tailwind base; - @tailwind components; - @tailwind utilities; + @import "tailwindcss"; + @plugin './hero.ts'; -// Note: You may need to change the path to fit your project structure +/* Note: You may need to change the path to fit your project structure */ + @source '../../node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}'; + @custom-variant dark (&:is(.dark *)); ``` @@ -61,19 +63,22 @@ Update your main css file In Tailwind v4, `tailwind.config.js` is still supported for backward compatibility. If you still need to use it, you can load it explicity as below. -```diff-js -// your main css file +```diff-css +/* your main css file */ - @tailwind base; - @tailwind components; - @tailwind utilities; + @import "tailwindcss"; -// Note: You may need to change the path to fit your project structure +/* Note: You may need to change the path to fit your project structure */ + @config "../../tailwind.config.js"; ``` ### Update PostCSS Configuration +- `tailwindcss` was a PostCSS plugin in v3 and now it is in `@tailwindcss/postcss` package. +- `autoprefixer` is no longer required as prefixing is handled automatically. + ```diff-js // postcss.config.js - export default { diff --git a/apps/docs/tailwind.config.js b/apps/docs/tailwind.config.js index 1a88f7f7c..c37986050 100644 --- a/apps/docs/tailwind.config.js +++ b/apps/docs/tailwind.config.js @@ -108,7 +108,7 @@ module.exports = { }, "h2 small": { fontSize: 'var(--text-lg);', - lineHeight: 'var(--text-lg--line-height););', + lineHeight: 'var(--text-lg--line-height);', }, "h3 small": { fontSize: 'var(--text-base); ',