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 (
-
+
+
+
);
};
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"
/>