chore(deps): update tailwindcss

Author: notunderctrl

apps/website/docusaurus.config.ts

@@ -138,21 +138,7 @@ const config: Config = {
       darkTheme: prismThemes.dracula,
     },
   } satisfies Preset.ThemeConfig,
-  plugins: [
-    function tailwindPlugin(context, options) {
-      return {
-        name: 'tailwind-plugin',
-        configurePostCss(postcssOptions) {
-          postcssOptions.plugins = [
-            require('postcss-import'),
-            require('tailwindcss'),
-            require('autoprefixer'),
-          ];
-          return postcssOptions;
-        },
-      };
-    },
-  ],
+  plugins: ['./src/plugins/tailwind-config.js'],
 };
 
 export default config;

apps/website/package.json

@@ -31,10 +31,11 @@
     "@docusaurus/remark-plugin-npm2yarn": "^3.7.0",
     "@docusaurus/tsconfig": "3.7.0",
     "@docusaurus/types": "3.7.0",
+    "@tailwindcss/postcss": "^4.1.7",
     "autoprefixer": "^10.4.20",
     "micro-docgen": "^0.3.5",
-    "postcss": "^8.4.49",
-    "tailwindcss": "^4.0.0",
+    "postcss": "^8.5.3",
+    "tailwindcss": "^4.1.7",
     "typescript": "~5.8.0"
   },
   "browserslist": {

apps/website/src/css/custom.css

@@ -1,6 +1,8 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@layer theme, base, components, utilities;
+@import 'tailwindcss/theme.css' layer(theme) important;
+@import 'tailwindcss/utilities.css' layer(utilities) important;
+
+@custom-variant dark (&:is([data-theme="dark"] *));
 
 /**
  * Any CSS included here will be global. The classic template

apps/website/src/plugins/tailwind-config.js

@@ -0,0 +1,9 @@
+module.exports = function tailwindPlugin(context, options) {
+  return {
+    name: 'tailwind-plugin',
+    configurePostCss(postcssOptions) {
+      postcssOptions.plugins = [require('@tailwindcss/postcss')];
+      return postcssOptions;
+    },
+  };
+};