Reapply TailwindCSS v4 migration (revert of f76013a)

Reverts the temporary revert commit f76013a, restoring the TailwindCSS
v4 (CSS-first) migration originally merged via PR #470. The revert was a
release-window hold so EditorInput 1.8.1 could ship on Tailwind v3; that
release is out, so the v4 migration (v2.0.0) is back on staging.

Conflict resolutions: version bumped to 2.0.0 in package.json,
package-lock.json, version.json, and README install refs; changelog
keeps the 1.8.1 entry with the 2.0.0 entry restored on top.

Author: jaieds

README.md

@@ -1,3 +1,6 @@
+Version 2.0.0 - 11th August, 2026
+- New: Migrated to TailwindCSS v4 (CSS-first) — the theme now ships as `@bsf/force-ui/theme.css` and the `withTW()` helper is deprecated; see the README migration guide for consumer upgrade steps (breaking).
+
 Version 1.8.1 - 11th August, 2026
 - Improvement: Organism - Editor Input: Added optional `triggerRegex` prop that overrides the built-in mention-suggestion matcher, so consumers can allow the trigger without a leading blank space (e.g. directly after a double quote inside JSON string values). The custom regex must expose the same capture groups as the built-in matcher: 1 = leading boundary, 2 = replaceable string (trigger + query), 3 = query string used to filter options. When omitted, the existing trigger-based matcher is used unchanged.
 - Fix: Atom - Select: In `multiple` mode the dropdown now stays open while selecting or deselecting options, closing only on Escape or outside click.

changelog.txt

@@ -1,6 +1,6 @@
 {
     "name": "@bsf/force-ui",
-    "version": "1.8.1",
+    "version": "2.0.0",
     "description": "Library of components for the BSF project",
     "main": "./dist/force-ui.cjs.js",
     "module": "./dist/force-ui.es.js",
@@ -28,6 +28,7 @@
             "import": "./dist/withTW.es.js",
             "require": "./dist/withTW.cjs.js"
         },
+        "./theme.css": "./dist/theme.css",
         "./dist/*": "./dist/*"
     },
     "scripts": {
@@ -86,8 +87,7 @@
         "react-day-picker": "^9.1.3",
         "recharts": "^2.13.0",
         "styled-components": "^6.1.12",
-        "tailwind-merge": "^2.4.0",
-        "tailwindcss-scoped-preflight": "^3.4.3"
+        "tailwind-merge": "^3.5.0"
     },
     "devDependencies": {
         "@chromatic-com/storybook": "^5.0.2",
@@ -103,7 +103,7 @@
         "@storybook/react": "^10.3.3",
         "@storybook/react-vite": "^10.3.3",
         "@storybook/test-runner": "^0.24.3",
-        "@tailwindcss/container-queries": "^0.1.1",
+        "@tailwindcss/postcss": "^4.3.2",
         "@types/lodash": "^4.17.13",
         "@types/node": "^22.7.6",
         "@types/react": "^18.3.10",
@@ -115,7 +115,6 @@
         "@wordpress/eslint-plugin": "^20.3.0",
         "@wordpress/prettier-config": "^4.4.0",
         "@wordpress/stylelint-config": "^23.2.0",
-        "autoprefixer": "^10.4.19",
         "axe-playwright": "^2.0.3",
         "chromatic": "^11.7.1",
         "cross-env": "^7.0.3",
@@ -137,7 +136,7 @@
         "storybook": "^10.3.3",
         "storybook-addon-paddings": "^6.0.2",
         "stylelint": "^16.8.2",
-        "tailwindcss": "^3.4.10",
+        "tailwindcss": "^4.3.2",
         "typescript": "5.4.2",
         "typescript-eslint": "^8.7.0",
         "vite": "^5.4.21",

package-lock.json

@@ -1,6 +1,5 @@
 module.exports = {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    '@tailwindcss/postcss': {},
   },
 }

package.json

@@ -107,7 +107,7 @@ const Alert = ( {
 					<div className="absolute right-4 top-4 [&_svg]:size-5">
 						<button
 							className={ cn(
-								'bg-transparent m-0 p-0 border-none focus:outline-none focus-visible:ring-2 focus-visible:ring-toggle-on focus-visible:ring-offset-2 active:outline-none cursor-pointer rounded',
+								'bg-transparent m-0 p-0 border-none focus:outline-hidden focus-visible:ring-2 focus-visible:ring-toggle-on focus-visible:ring-offset-2 active:outline-hidden cursor-pointer rounded-sm',
 								closeIconClassNames[ theme ] ??
 									closeIconClassNames.light
 							) }
@@ -156,7 +156,7 @@ const Alert = ( {
 				{ typeof onClose === 'function' && (
 					<button
 						className={ cn(
-							'self-start bg-transparent m-0 border-none p-0.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-toggle-on focus-visible:ring-offset-2 active:outline-none cursor-pointer size-5 rounded',
+							'self-start bg-transparent m-0 border-none p-0.5 focus:outline-hidden focus-visible:ring-2 focus-visible:ring-toggle-on focus-visible:ring-offset-2 active:outline-hidden cursor-pointer size-5 rounded-sm',
 							closeIconClassNames[ theme ] ??
 								closeIconClassNames.light
 						) }

postcss.config.cjs

@@ -308,7 +308,7 @@ export const AreaChartCard1: Story1 = ( args ) => (
 	<Container
 		containerType="grid"
 		gap="xs"
-		className="p-4 bg-background-primary rounded-lg shadow-sm"
+		className="p-4 bg-background-primary rounded-lg shadow-xs"
 		{ ...args }
 	>
 		<Container.Item className="p-1 space-y-2">
@@ -371,7 +371,7 @@ export const AreaChartCard2: Story1 = ( args ) => (
 	<Container
 		containerType="grid"
 		gap="xs"
-		className="p-4 bg-background-primary rounded-lg shadow-sm"
+		className="p-4 bg-background-primary rounded-lg shadow-xs"
 		{ ...args }
 	>
 		<Container.Item className="p-1 space-y-2">

src/components/alert/alert.tsx

@@ -46,7 +46,7 @@ const ChartLegendContent = React.forwardRef<
 					<div key={ item.value } className="flex items-center gap-1.5">
 						{ ! hideIcon && (
 							<div
-								className="size-2 shrink-0 rounded-sm"
+								className="size-2 shrink-0 rounded-xs"
 								style={ {
 									backgroundColor: item.color,
 								} }

src/components/area-chart/area-chart.stories.tsx

@@ -250,7 +250,7 @@ export const BarChartCard1: Story1 = ( args ) => (
 	<Container
 		containerType="grid"
 		gap="xs"
-		className="p-4 bg-background-primary rounded-lg shadow-sm"
+		className="p-4 bg-background-primary rounded-lg shadow-xs"
 		{ ...args }
 	>
 		<Container.Item className="p-1 space-y-2">
@@ -312,7 +312,7 @@ export const BarChartCard2: Story1 = ( args ) => (
 	<Container
 		containerType="grid"
 		gap="xs"
-		className="p-4 bg-background-primary rounded-lg shadow-sm"
+		className="p-4 bg-background-primary rounded-lg shadow-xs"
 		{ ...args }
 	>
 		<Container.Item className="p-1 space-y-2">
@@ -377,7 +377,7 @@ export const BarChartCard3: Story1 = ( args ) => (
 	<Container
 		containerType="grid"
 		gap="xs"
-		className="p-4 bg-background-primary rounded-lg shadow-sm"
+		className="p-4 bg-background-primary rounded-lg shadow-xs"
 		{ ...args }
 	>
 		<Container.Item className="p-1 space-y-2">
@@ -443,7 +443,7 @@ export const BarChartCard4: Story1 = ( args ) => (
 	<Container
 		containerType="grid"
 		gap="xs"
-		className="p-4 bg-background-primary rounded-lg shadow-sm"
+		className="p-4 bg-background-primary rounded-lg shadow-xs"
 		{ ...args }
 	>
 		<Container.Item className="p-1 space-y-2">
@@ -508,7 +508,7 @@ export const AreaChartCard5: Story1 = ( args ) => (
 	<Container
 		containerType="grid"
 		gap="xs"
-		className="p-4 bg-background-primary rounded-lg shadow-sm"
+		className="p-4 bg-background-primary rounded-lg shadow-xs"
 		{ ...args }
 	>
 		<Container.Item className="p-1 space-y-2">

src/components/area-chart/chart-legend-content.tsx

@@ -46,7 +46,7 @@ const ChartLegendContent = React.forwardRef<
 					<div key={ item.value } className="flex items-center gap-1.5">
 						{ ! hideIcon && (
 							<div
-								className="size-2 shrink-0 rounded-sm"
+								className="size-2 shrink-0 rounded-xs"
 								style={ {
 									backgroundColor: item.color,
 								} }