switch to Tailwind v3, add custom config, patch twrnc, further tweaks

Simek · Simek · commit 0fbc747bca7a · 2025-12-12T21:06:16.000+01:00
diff --git a/bun.lock b/bun.lock
diff --git a/components/Libraries.tsx b/components/Libraries.tsx
@@ -1,10 +1,10 @@
 import dynamic from 'next/dynamic';
 import { View } from 'react-native';
-import tw from 'twrnc';
 
 import LoadingContent from '~/components/Library/LoadingContent';
 import NotFound from '~/components/Package/NotFound';
 import { type LibraryType } from '~/types';
+import tw from '~/util/tailwind';
 
 type Props = {
   libraries: LibraryType[];
diff --git a/components/NotFoundContent.tsx b/components/NotFoundContent.tsx
@@ -1,8 +1,8 @@
 import { type ReactElement } from 'react';
 import { Image, View } from 'react-native';
-import tw from 'twrnc';
 
 import { A, H3, P } from '~/common/styleguide';
+import tw from '~/util/tailwind';
 
 type Props = {
   header?: string;
diff --git a/components/Package/NotFound.tsx b/components/Package/NotFound.tsx
@@ -1,10 +1,9 @@
-import tw from 'twrnc';
-
 import { Button } from '~/components/Button';
 import ContentContainer from '~/components/ContentContainer';
 import Navigation from '~/components/Navigation';
 import NotFoundContent from '~/components/NotFoundContent';
 import PageMeta from '~/components/PageMeta';
+import tw from '~/util/tailwind';
 
 export default function NotFound() {
   return (
diff --git a/components/TopBar.tsx b/components/TopBar.tsx
@@ -2,12 +2,12 @@ import { Header as HtmlHeader } from '@expo/html-elements';
 import Link from 'next/link';
 import { useContext } from 'react';
 import { StyleSheet, View } from 'react-native';
-import tw from 'twrnc';
 
 import { layout, colors, H5, P, darkColors, useLayout } from '~/common/styleguide';
 import ContentContainer from '~/components/ContentContainer';
 import NavigationTab from '~/components/NavigationTab';
 import CustomAppearanceContext from '~/context/CustomAppearanceContext';
+import tw from '~/util/tailwind';
 
 import { Button } from './Button';
 import { GitHub, Logo, Plus, ThemeDark, ThemeLight, Tools } from './Icons';
diff --git a/context/CustomAppearanceProvider.tsx b/context/CustomAppearanceProvider.tsx
@@ -1,7 +1,8 @@
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import { type PropsWithChildren, useEffect, useState } from 'react';
 import { View } from 'react-native';
-import tw, { useDeviceContext, useAppColorScheme } from 'twrnc';
+
+import tw, { useDeviceContext, useAppColorScheme } from '~/util/tailwind';
 
 import CustomAppearanceContext, {
   type CustomAppearanceContextType,
@@ -52,6 +53,7 @@ export default function CustomAppearanceProvider({ children }: PropsWithChildren
   } else {
     return (
       <CustomAppearanceContext.Provider
+        key={tw.memoBuster}
         value={{
           isDark,
           setIsDark: isDark => {
diff --git a/package.json b/package.json
@@ -26,7 +26,6 @@
     "@react-native-async-storage/async-storage": "^2.2.0",
     "@react-native-picker/picker": "^2.11.4",
     "@sentry/react": "^10.30.0",
-    "@tailwindcss/postcss": "^4.1.18",
     "crypto-js": "^4.2.0",
     "es-toolkit": "^1.43.0",
     "expo": "54.0.29",
@@ -47,7 +46,7 @@
     "rehype-sanitize": "^6.0.0",
     "remark-emoji": "^5.0.2",
     "remark-gfm": "^4.0.1",
-    "tailwindcss": "^4.1.18",
+    "tailwindcss": "^3.4.19",
     "twrnc": "^4.11.1",
     "use-debounce": "^10.0.6"
   },
@@ -90,5 +89,8 @@
     "react-native-libraries.json": [
       "bun libraries:cleanup"
     ]
+  },
+  "patchedDependencies": {
+    "twrnc@4.11.1": "patches/twrnc@4.11.1.patch"
   }
 }
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -22,10 +22,7 @@ Sentry.init({
 function App({ pageProps, Component }: AppProps) {
   return (
     <CustomAppearanceProvider>
-      <SafeAreaProvider
-        style={{
-          flex: 1,
-        }}>
+      <SafeAreaProvider style={{ flex: 1 }}>
         <Head>
           <meta
             name="viewport"
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,7 +1,6 @@
 import { type NextPageContext } from 'next';
 import { useRouter } from 'next/router';
 import { type ParsedUrlQuery } from 'node:querystring';
-import { StyleSheet } from 'react-native';
 
 import ContentContainer from '~/components/ContentContainer';
 import Libraries from '~/components/Libraries';
@@ -11,6 +10,7 @@ import Pagination from '~/components/Pagination';
 import Search from '~/components/Search';
 import { type APIResponseType } from '~/types';
 import getApiUrl from '~/util/getApiUrl';
+import tw from '~/util/tailwind';
 import urlWithQuery from '~/util/urlWithQuery';
 
 type Props = {
@@ -21,11 +21,12 @@ type Props = {
 function Index({ data, query }: Props) {
   const router = useRouter();
   const total = data.total ?? 0;
+
   return (
     <>
       <PageMeta searchQuery={router.query?.search} />
       <Navigation header={<Search query={router.query} total={total} />} />
-      <ContentContainer style={styles.container}>
+      <ContentContainer style={tw`px-4 py-3`}>
         <Pagination query={query} total={total} />
         <Libraries libraries={data && data.libraries} />
         <Pagination query={query} total={total} />
@@ -45,11 +46,4 @@ Index.getInitialProps = async (ctx: NextPageContext) => {
   };
 };
 
-const styles = StyleSheet.create({
-  container: {
-    paddingHorizontal: 16,
-    paddingVertical: 12,
-  },
-});
-
 export default Index;
diff --git a/pages/tools.tsx b/pages/tools.tsx
@@ -1,9 +1,8 @@
-import { StyleSheet } from 'react-native';
-
 import ContentContainer from '~/components/ContentContainer';
 import Navigation from '~/components/Navigation';
 import PageMeta from '~/components/PageMeta';
 import ToolEntry from '~/components/Tools/ToolEntry';
+import tw from '~/util/tailwind';
 
 export default function Tools() {
   return (
@@ -17,7 +16,7 @@ export default function Tools() {
         title="Tools"
         description="List of development tools, apps and websites using React Native Directory data."
       />
-      <ContentContainer style={styles.container}>
+      <ContentContainer style={tw`my-10 px-4 gap-4`}>
         <ToolEntry
           name="React Native Directory VS Code extension"
           description="Browse through the React Native Directory and perform actions related to the chosen package inside the built-in editor Command Palette."
@@ -85,35 +84,3 @@ export default function Tools() {
     </>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    marginVertical: 40,
-    paddingHorizontal: 16,
-    gap: 16,
-  },
-  subHeader: {
-    fontSize: 22,
-    marginTop: 16,
-    marginBottom: 12,
-  },
-  paragraph: {
-    fontSize: 17,
-    lineHeight: 29,
-    marginBottom: 17,
-    fontWeight: 300,
-  },
-  buttonsContainer: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    gap: 12,
-    marginBottom: 24,
-  },
-  button: {
-    flexDirection: 'row',
-    paddingHorizontal: 12,
-    minHeight: 32,
-    fontSize: 14,
-    gap: 6,
-  },
-});
diff --git a/postcss.config.mjs b/postcss.config.mjs
@@ -1,6 +1,6 @@
 const config = {
   plugins: {
-    '@tailwindcss/postcss': {},
+    tailwindcss: {},
   },
 };
 
diff --git a/react-native-libraries.json b/react-native-libraries.json
@@ -18650,18 +18650,14 @@
   {
     "githubUrl": "https://github.com/criipto/criipto-verify-expo",
     "npmPkg": "@criipto/verify-expo",
-    "examples": [
-      "https://github.com/criipto/criipto-verify-expo/tree/master/example"
-    ],
+    "examples": ["https://github.com/criipto/criipto-verify-expo/tree/master/example"],
     "ios": true,
     "android": true
   },
   {
     "githubUrl": "https://github.com/pagopa/io-app-design-system",
     "npmPkg": "@pagopa/io-app-design-system",
-    "examples": [
-      "https://github.com/pagopa/io-app-design-system/tree/main/example"
-    ],
+    "examples": ["https://github.com/pagopa/io-app-design-system/tree/main/example"],
     "ios": true,
     "android": true
   }
diff --git a/scenes/ErrorScene.tsx b/scenes/ErrorScene.tsx
@@ -1,10 +1,10 @@
 import { Image, View } from 'react-native';
-import tw from 'twrnc';
 
 import { H3, A, P } from '~/common/styleguide';
 import Navigation from '~/components/Navigation';
 import NotFound from '~/components/Package/NotFound';
 import PageMeta from '~/components/PageMeta';
+import tw from '~/util/tailwind';
 
 type Props = {
   statusCode: number;
diff --git a/scenes/TrendingScene.tsx b/scenes/TrendingScene.tsx
@@ -2,7 +2,6 @@ import dynamic from 'next/dynamic';
 import { useRouter } from 'next/router';
 import { useContext, useState } from 'react';
 import { Image, StyleSheet, View } from 'react-native';
-import tw from 'twrnc';
 
 import { A, H4, colors, darkColors, P } from '~/common/styleguide';
 import ContentContainer from '~/components/ContentContainer';
@@ -15,6 +14,7 @@ import Pagination from '~/components/Pagination';
 import CustomAppearanceContext from '~/context/CustomAppearanceContext';
 import { type LibraryType } from '~/types';
 import { type TrendingPageProps } from '~/types/pages';
+import tw from '~/util/tailwind';
 import urlWithQuery from '~/util/urlWithQuery';
 
 const LibraryWithLoading = dynamic(() => import('~/components/Library'), {
diff --git a/styles/styles.css b/styles/styles.css
@@ -100,9 +100,7 @@
 }
 
 *:focus-visible {
-  outline-style: solid;
-  outline-width: 2px;
-  outline-color: var(--outline);
+  outline: var(--outline) solid 2px;
   border-radius: 3px;
 }
 
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -0,0 +1,57 @@
+import plugin from 'tailwindcss/plugin';
+
+const palette = {
+  'palette-gray1': 'var(--gray-1)',
+  'palette-gray2': 'var(--gray-2)',
+  'palette-gray3': 'var(--gray-3)',
+  'palette-gray4': 'var(--gray-4)',
+  'palette-gray5': 'var(--gray-5)',
+  'palette-gray6': 'var(--gray-6)',
+  'palette-gray7': 'var(--gray-7)',
+};
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    './common/**/*.tsx',
+    './components/**/*.tsx',
+    './context/**/*.tsx',
+    './pages/**/*.tsx',
+    './scenes/**/*.tsx',
+  ],
+  darkMode: 'class',
+  theme: {
+    backgroundColor: {
+      transparent: 'transparent',
+      current: 'currentColor',
+      ...palette,
+    },
+    borderColor: {
+      transparent: 'transparent',
+      current: 'currentColor',
+      ...palette,
+    },
+    colors: {
+      transparent: 'transparent',
+      current: 'currentColor',
+      ...palette,
+    },
+    gradientColorStops: {
+      transparent: 'transparent',
+      ...palette,
+    },
+    extend: {},
+  },
+  corePlugins: {
+    fontFamily: false,
+  },
+  plugins: [
+    plugin(({ addUtilities, addVariant }) => {
+      // addVariant('hocus', ['&:hover', '&:focus-visible']);
+      addUtilities({
+        '.break-words': { 'word-break': 'break-word' },
+        '.wrap-anywhere': { 'overflow-wrap': 'anywhere' },
+      });
+    }),
+  ],
+};
diff --git a/util/tailwind.ts b/util/tailwind.ts
@@ -0,0 +1,7 @@
+import { create } from 'twrnc';
+
+const tw = create(require(`../tailwind.config.js`));
+
+export { useDeviceContext, useAppColorScheme } from 'twrnc';
+
+export default tw;
