feat: migrate to Tailwind CSS 4.0

packages/eslint-config/index.js

@@ -10,7 +10,7 @@ module.exports = {
     'plugin:prettier/recommended',
     'plugin:react-hooks/recommended',
   ],
-  plugins: ['prettier', 'tailwindcss', 'react-hooks', 'unused-imports'],
+  plugins: ['prettier', /* 'tailwindcss', */ 'react-hooks', 'unused-imports'],
   parserOptions: {
     project: './tsconfig.eslint.json',
     ecmaVersion: 2020,
@@ -45,8 +45,10 @@ module.exports = {
     'react/no-danger': 0,
     '@typescript-eslint/return-await': 0,
     '@typescript-eslint/consistent-type-imports': 'error',
-    'tailwindcss/classnames-order': 'warn',
-    'tailwindcss/no-contradicting-classname': 'error',
+    // TODO: Re-enable when eslint-plugin-tailwindcss supports Tailwind v4
+    // Temporarily disabled - eslint-plugin-tailwindcss not yet compatible with Tailwind v4
+    // 'tailwindcss/classnames-order': 'warn',
+    // 'tailwindcss/no-contradicting-classname': 'error',
     'no-restricted-globals': [
       'error',
       {

packages/extension/package.json

@@ -104,7 +104,7 @@
     "prettier": "^2.6.2",
     "resolve-url-loader": "^5.0.0",
     "sass": "^1.53.0",
-    "tailwindcss": "^3.4.14",
+    "tailwindcss": "^4.1.18",
     "terser-webpack-plugin": "^4.2.3",
     "ts-jest": "^26.5.4",
     "typescript": "5.6.3",

packages/extension/tsconfig.json

@@ -14,7 +14,7 @@
     "noEmit": true,
     "esModuleInterop": true,
     "module": "esnext",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "react"

packages/shared/package.json

@@ -96,8 +96,8 @@
     "react-intersection-observer": "^8.32.2",
     "react-modal": "^3.14.3",
     "react-swipeable": "^7.0.1",
-    "tailwindcss": "^3.4.14",
-    "tailwindcss-safe-area": "0.8.0",
+    "@tailwindcss/postcss": "^4.0.0",
+    "tailwindcss": "^4.1.18",
     "ts-jest": "^26.5.4",
     "typescript": "5.6.3"
   },

packages/shared/postcss.config.js

@@ -2,7 +2,6 @@
 
 module.exports = {
   plugins: [
-    'postcss-import',
     [
       'postcss-simple-vars',
       {
@@ -16,10 +15,7 @@ module.exports = {
         },
       },
     ],
-    process.env.TARGET_BROWSER
-      ? require('tailwindcss/nesting')(require('postcss-nesting'))
-      : 'tailwindcss/nesting',
-    'tailwindcss',
+    '@tailwindcss/postcss',
     'postcss-focus-visible',
     'postcss-custom-media',
     'postcss-mixins',
@@ -30,6 +26,5 @@ module.exports = {
           propList: ['*'],
         })
       : ['postcss-rem-to-responsive-pixel', { rootValue: 16, propList: ['*'] }],
-    'autoprefixer',
   ],
 };

packages/shared/src/components/accordion/style.css

@@ -1,3 +1,5 @@
+@reference "../../styles/globals.css";
+
 .AccordionRoot {
 @apply flex flex-col gap-2 w-full flex-1;
 }

packages/shared/src/components/dropdown/style.css

@@ -1,3 +1,5 @@
+@reference "../../styles/globals.css";
+
 [data-radix-popper-content-wrapper] {
   z-index: 1000!important;
 }

packages/shared/src/components/fields/CustomSwitch.module.css

@@ -1,3 +1,5 @@
+@reference "../../styles/globals.css";
+
 .knob {
   @apply bg-raw-cabbage-40;
   transition-property: transform, width;

packages/shared/src/components/history/ReadingHistoryOptionsMenu.tsx

@@ -1,6 +1,6 @@
 import type { ReactElement } from 'react';
 import React, { useState } from 'react';
-import type { QueryClient, QueryKey } from '@tanstack/react-query/build/modern';
+import type { QueryClient, QueryKey } from '@tanstack/react-query';
 import { useQueryClient } from '@tanstack/react-query';
 import classNames from 'classnames';
 import {

packages/shared/src/components/markdown.module.css

@@ -1,3 +1,5 @@
+@reference "../styles/globals.css";
+
 .markdown {
   position: relative;
   word-break: break-word;

packages/shared/src/components/post/AuthorOnboarding.module.css

@@ -1,3 +1,5 @@
+@reference "../../styles/globals.css";
+
 .authorOnboarding {
   & p {
     margin: 1rem 0;

packages/shared/src/components/profile/ActivitySection.tsx

@@ -1,7 +1,9 @@
 import type { ReactElement, ReactNode } from 'react';
 import React, { Fragment } from 'react';
-import type { UseInfiniteQueryResult } from '@tanstack/react-query/build/legacy/types';
-import type { InfiniteData } from '@tanstack/react-query';
+import type {
+  InfiniteData,
+  UseInfiniteQueryResult,
+} from '@tanstack/react-query';
 import classed from '../../lib/classed';
 import type { FeedData } from '../../graphql/feed';
 import type { Post } from '../../graphql/posts';

packages/shared/src/components/profile/LanguageDropdown.tsx

@@ -39,7 +39,7 @@ export const LanguageDropdown = ({
   const [open, setOpen] = useState(false);
   const validLanguages = useFeature(featureValidLanguages);
   const languageOptions = useMemo(() => {
-    return ['Original language', ...Object.values(validLanguages)];
+    return ['Original language', ...Object.values(validLanguages)] as string[];
   }, [validLanguages]);
   const values = useMemo(() => {
     return [null, ...Object.keys(validLanguages)];

packages/shared/src/features/onboarding/hooks/useFunnelBoot.ts

@@ -1,5 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
-import type { UseQueryResult } from '@tanstack/react-query/src/types';
+import type { UseQueryResult } from '@tanstack/react-query';
 import type { FunnelBootData } from '../types/funnelBoot';
 
 /**

packages/shared/src/features/onboarding/shared/PricingPlan.module.css

@@ -1,3 +1,5 @@
+@reference "../../../styles/globals.css";
+
 /*
 * Had to CSS to hack my way with the best value variant.
 * First, we need to expand the label using the wrapper of the radio item which isn't highly customizable

packages/shared/src/hooks/contentPreference/useFollowersQuery.ts

@@ -1,9 +1,9 @@
 import type {
   InfiniteData,
   UseInfiniteQueryOptions,
+  UseInfiniteQueryResult,
 } from '@tanstack/react-query';
 import { useInfiniteQuery } from '@tanstack/react-query';
-import type { UseInfiniteQueryResult } from '@tanstack/react-query/build/legacy/types';
 import type {
   ContentPreference,
   ContentPreferenceType,

packages/shared/src/styles/base.css

@@ -1,3 +1,5 @@
+@reference "./globals.css";
+
 html, #daily-companion-wrapper {
   background: var(--theme-background-default);
   color: var(--theme-text-primary);

packages/shared/src/styles/components/buttons.css

@@ -1,3 +1,5 @@
+@reference "../globals.css";
+
 .btn {
   transition: 0.2s ease-in-out;
   transition-property: border, background, box-shadow, color;

packages/shared/src/styles/components/menu.css

@@ -1,3 +1,5 @@
+@reference "../globals.css";
+
 .react-contexify {
   position: fixed;
   opacity: 0;

packages/shared/src/styles/globals.css

@@ -1,10 +1,5 @@
-@import 'tailwindcss/base.css';
+@import 'tailwindcss';
 @import './base.css';
-
-@import 'tailwindcss/components.css';
 @import './components.css';
-
-@import 'tailwindcss/utilities.css';
 @import './utilities.css';
-
 @import './ios.css';

packages/shared/tailwind.config.ts

@@ -1,7 +1,4 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
-import { type Config } from 'tailwindcss';
-// eslint-disable-next-line import/no-extraneous-dependencies
-import safeArea from 'tailwindcss-safe-area';
+import type { Config } from 'tailwindcss';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import containerQueries from '@tailwindcss/container-queries';
 import colors from './tailwind/colors';
@@ -261,9 +258,6 @@ export default {
     },
   },
   // eslint-disable-next-line global-require
-  plugins: [caret, typography, buttons, safeArea, containerQueries],
-  corePlugins: {
-    invert: false,
-  },
+  plugins: [caret, typography, buttons, containerQueries],
   // eslint-disable-next-line
 } satisfies Config;

packages/shared/tailwind/caret.ts

@@ -2,29 +2,27 @@
 // @ts-nocheck
 import plugin from 'tailwindcss/plugin';
 
-const generateColors = (e, colors, prefix) =>
+const generateColors = (colors, prefix) =>
   Object.keys(colors).reduce((acc, key) => {
     if (typeof colors[key] === 'string') {
       return {
         ...acc,
-        [`${prefix}-${e(key)}`]: {
+        [`${prefix}-${key}`]: {
           'caret-color': colors[key],
         },
       };
     }
 
-    const innerColors = generateColors(e, colors[key], `${prefix}-${e(key)}`);
+    const innerColors = generateColors(colors[key], `${prefix}-${key}`);
 
     return {
       ...acc,
       ...innerColors,
     };
   }, {});
 
-export default plugin.withOptions(({ className = 'caret' } = {}) => {
-  return ({ e, addUtilities, theme, variants }) => {
-    const colors = theme('colors');
-    const caretColors = generateColors(e, colors, `.${className}`);
-    addUtilities(caretColors, variants('caretColor'));
-  };
+export default plugin(({ addUtilities, theme }) => {
+  const colors = theme('colors');
+  const caretColors = generateColors(colors, `.caret`);
+  addUtilities(caretColors);
 });

packages/shared/tsconfig.json

@@ -14,7 +14,7 @@
     "noEmit": true,
     "esModuleInterop": true,
     "module": "esnext",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve"

packages/storybook/tsconfig.json

@@ -8,7 +8,7 @@
     "noEmit": true,
     "esModuleInterop": true,
     "module": "esnext",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",

packages/webapp/package.json

@@ -100,8 +100,7 @@
     "postcss-simple-vars": "^7.0.1",
     "prettier": "^2.6.2",
     "serwist": "^9.0.9",
-    "tailwindcss": "^3.4.14",
-    "tailwindcss-safe-area": "0.8.0",
+    "tailwindcss": "^4.1.18",
     "ts-jest": "^26.5.4",
     "typescript": "5.6.3",
     "vercel": "^21.3.3"

packages/webapp/tsconfig.json

@@ -15,7 +15,7 @@
     "noEmit": true,
     "esModuleInterop": true,
     "module": "esnext",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",