diff --git a/examples/gnt/app/components/CscCharactersSearch.tsx b/examples/gnt/app/components/CscCharactersSearch.tsx index b75e1c724..bea56e27e 100644 --- a/examples/gnt/app/components/CscCharactersSearch.tsx +++ b/examples/gnt/app/components/CscCharactersSearch.tsx @@ -54,15 +54,24 @@ const SearchBox: FunctionComponent<{ const [inputName, setInputName] = useState(''); return ( -
+
{ + e.preventDefault(); + onChange?.(inputName); + }} + > setInputName(e.target.value)} - className="border border-gray-300 rounded-md px-3 py-2 w-full text-black" + className="border border-gray-300 rounded-md px-3 py-2 w-full text-black bg-white" /> - -
+ + ); }; diff --git a/examples/gnt/app/globals.css b/examples/gnt/app/globals.css index fd81e8858..3f9d8a0fd 100644 --- a/examples/gnt/app/globals.css +++ b/examples/gnt/app/globals.css @@ -1,6 +1,32 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; +@import 'tailwindcss'; + +@plugin '@tailwindcss/typography'; + +@theme { + --background-image-gradient-radial: radial-gradient(var(--tw-gradient-stops)); + --background-image-gradient-conic: conic-gradient( + from 180deg at 50% 50%, + var(--tw-gradient-stops) + ); +} + +/* + The default border color has changed to `currentColor` in Tailwind CSS v4, + so we've added these compatibility styles to make sure everything still + looks the same as it did with Tailwind CSS v3. + + If we ever want to remove these styles, we need to add an explicit border + color utility to any element that depends on these defaults. +*/ +@layer base { + *, + ::after, + ::before, + ::backdrop, + ::file-selector-button { + border-color: var(--color-gray-200, currentColor); + } +} :root { --foreground-rgb: 0, 0, 0; diff --git a/examples/gnt/components/tailwindui/Button.tsx b/examples/gnt/components/tailwindui/Button.tsx index c653db0fb..e67937ced 100644 --- a/examples/gnt/components/tailwindui/Button.tsx +++ b/examples/gnt/components/tailwindui/Button.tsx @@ -21,58 +21,58 @@ export const Button: FunctionComponent = ({ disabled={disabled} className={`${className} cursor-pointer inline-flex items-center border font-medium shadow-sm - focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 + focus:outline-hidden focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 ${ accent === 'primary' ? `border-transparent bg-indigo-600 hover:bg-indigo-700 active:bg-indigo-500 text-white` : accent === 'secondary' - ? `border-transparent bg-indigo-100 hover:bg-indigo-200 active:bg-indigo-50 text-indigo-700` - : accent === 'white' - ? `border-gray-300 bg-white hover:bg-gray-50 active:bg-gray-100 text-gray-700` - : `` + ? `border-transparent bg-indigo-100 hover:bg-indigo-200 active:bg-indigo-50 text-indigo-700` + : accent === 'white' + ? `border-gray-300 bg-white hover:bg-gray-50 active:bg-gray-100 text-gray-700` + : `` } ${ size === 'xs' ? `${ rounded === undefined - ? `rounded px-2.5 py-1.5` + ? `rounded-sm px-2.5 py-1.5` : rounded - ? `rounded-full p-1` - : `px-2.5 py-1.5` + ? `rounded-full p-1` + : `px-2.5 py-1.5` } text-xs` : size === 'sm' - ? `${ - rounded === undefined - ? `rounded-md px-3 py-2` - : rounded - ? `rounded-full p-1.5` - : `px-3 py-2` - } text-sm leading-4` - : size === 'md' - ? `${ - rounded === undefined - ? `rounded-md px-4 py-2` - : rounded - ? `rounded-full p-2` - : `px-4 py-2` - } text-sm` - : size === 'lg' - ? `${ - rounded === undefined - ? `rounded-md px-4 py-2` - : rounded - ? `rounded-full p-2` - : `px-4 py-2` - } text-base` - : size === 'xl' - ? `${ - rounded === undefined - ? `rounded-md px-6 py-3` - : rounded - ? `rounded-full p-3` - : `px-6 py-3` - } text-base` - : `` + ? `${ + rounded === undefined + ? `rounded-md px-3 py-2` + : rounded + ? `rounded-full p-1.5` + : `px-3 py-2` + } text-sm leading-4` + : size === 'md' + ? `${ + rounded === undefined + ? `rounded-md px-4 py-2` + : rounded + ? `rounded-full p-2` + : `px-4 py-2` + } text-sm` + : size === 'lg' + ? `${ + rounded === undefined + ? `rounded-md px-4 py-2` + : rounded + ? `rounded-full p-2` + : `px-4 py-2` + } text-base` + : size === 'xl' + ? `${ + rounded === undefined + ? `rounded-md px-6 py-3` + : rounded + ? `rounded-full p-3` + : `px-6 py-3` + } text-base` + : `` }`} {...props} /> diff --git a/examples/gnt/package.json b/examples/gnt/package.json index 589511680..29d4487e8 100644 --- a/examples/gnt/package.json +++ b/examples/gnt/package.json @@ -23,16 +23,16 @@ "devDependencies": { "@gqty/cli": "workspace:^", "@next/bundle-analyzer": "^14.2.23", + "@tailwindcss/postcss": "^4.0.0", "@tailwindcss/typography": "^0.5.16", "@types/node": "22.13.1", "@types/react": "18.3.18", "@types/react-dom": "18.3.5", - "autoprefixer": "^10.4.20", "dotenv-cli": "^8.0.0", "eslint": "^9.19.0", "eslint-config-next": "^14.2.23", "postcss": "^8.5.1", - "tailwindcss": "^3.4.17", + "tailwindcss": "^4.0.4", "typescript": "^5.7.3" }, "gqty": { diff --git a/examples/gnt/postcss.config.js b/examples/gnt/postcss.config.js index 12a703d90..85d8dabd2 100644 --- a/examples/gnt/postcss.config.js +++ b/examples/gnt/postcss.config.js @@ -1,6 +1 @@ -module.exports = { - plugins: { - tailwindcss: {}, - autoprefixer: {}, - }, -}; +module.exports = { plugins: { '@tailwindcss/postcss': {} } }; diff --git a/examples/gnt/tailwind.config.js b/examples/gnt/tailwind.config.js deleted file mode 100644 index ec4b4d6a2..000000000 --- a/examples/gnt/tailwind.config.js +++ /dev/null @@ -1,18 +0,0 @@ -/** @type {import('tailwindcss').Config} */ -module.exports = { - content: [ - './app/**/*.{js,ts,jsx,tsx,mdx}', - './components/**/*.{js,ts,jsx,tsx,mdx}', - './pages/**/*.{js,ts,jsx,tsx,mdx}', - ], - theme: { - extend: { - backgroundImage: { - 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))', - 'gradient-conic': - 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))', - }, - }, - }, - plugins: [require('@tailwindcss/typography')], -}; diff --git a/examples/solid/package.json b/examples/solid/package.json index de41b8e6b..a389b6900 100644 --- a/examples/solid/package.json +++ b/examples/solid/package.json @@ -17,12 +17,12 @@ "solid-js": "^1.9.4" }, "devDependencies": { + "@tailwindcss/postcss": "^4.0.0", "@tailwindcss/typography": "^0.5.16", - "autoprefixer": "^10.4.20", "graphql": "^16.10.0", "postcss": "^8.5.1", "solid-devtools": "^0.33.0", - "tailwindcss": "^3.4.17", + "tailwindcss": "^4.0.4", "typescript": "^5.7.3", "vite": "^6.0.11", "vite-plugin-solid": "^2.11.1" diff --git a/examples/solid/postcss.config.js b/examples/solid/postcss.config.js index 2aa7205d4..d1840a7c4 100644 --- a/examples/solid/postcss.config.js +++ b/examples/solid/postcss.config.js @@ -1,6 +1 @@ -export default { - plugins: { - tailwindcss: {}, - autoprefixer: {}, - }, -}; +export default { plugins: { '@tailwindcss/postcss': {} } }; diff --git a/examples/solid/src/components/Characters.tsx b/examples/solid/src/components/Characters.tsx index 39fdd8013..b6b2687ee 100644 --- a/examples/solid/src/components/Characters.tsx +++ b/examples/solid/src/components/Characters.tsx @@ -66,7 +66,7 @@ const SearchBox: Component<{ type="text" value={inputName()} onChange={(e) => setInputName(e.target.value)} - class="border border-gray-300 rounded-md px-3 py-2 w-full text-black" + class="border border-gray-300 rounded-md px-3 py-2 w-full text-black bg-white" />