Added Tailwind shared config (#19)

lumburovskalina · web-flow · commit 28a2a77f1fe5 · 2024-07-22T16:53:10.000+02:00
* Added Tailwind shared config

* Added shared style for elements

* Package upgrade

* Font family changed

* Renamed tailwind.css and remove font family
diff --git a/.gitmodules b/.gitmodules
@@ -4,3 +4,6 @@
 [submodule "submodules/react-components"]
 	path = submodules/react-components
 	url = https://github.com/code-kern-ai/submodule-react-components.git
+[submodule "submodules/tailwind-config"]
+    path = submodules/tailwind-config
+    url = https://github.com/code-kern-ai/submodule-tailwind-config.git
diff --git a/package.json b/package.json
@@ -9,17 +9,18 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@headlessui/react": "^1.7.18",
+    "@headlessui/react": "^1.7.19",
+    "@headlessui/tailwindcss": "^0.2.1",
     "@nextui-org/react": "^1.0.0-beta.13",
     "@ory/client": "^1.1.24",
     "@ory/integrations": "^1.1.0",
     "@ory/kratos-client": "^0.11.1",
     "@ory/themes": "^0.0.101",
-    "@tabler/icons-react": "^3.2.0",
-    "@tailwindcss/forms": "^0.5.3",
-    "@types/node": "18.15.12",
-    "@types/react": "18.0.37",
-    "@types/react-dom": "18.0.11",
+    "@tabler/icons-react": "^3.8.0",
+    "@tailwindcss/forms": "^0.5.7",
+    "@types/node": "18.19.39",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "cors": "^2.8.5",
     "eslint": "8.38.0",
     "eslint-config-next": "13.3.0",
@@ -37,8 +38,8 @@
     "@types/cors": "^2.8.13",
     "@types/express": "^4.17.17",
     "@types/styled-components": "^5.1.26",
-    "autoprefixer": "^10.4.14",
+    "autoprefixer": "^10.4.19",
     "postcss": "^8.4.23",
-    "tailwindcss": "^3.3.1"
+    "tailwindcss": "^3.4.4"
   }
-}
+}
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,5 +1,6 @@
 import { UserManagerWrapper } from "@/util/UserManaged"
-import "../styles/globals.css"
+import "../styles/tailwind.css"
+import '@/submodules/tailwind-config/global.css';
 import { theme, globalStyles, ThemeProps } from "@ory/themes"
 import type { AppProps } from "next/app"
 import Head from "next/head"
diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -0,0 +1,30 @@
+import React from 'react'
+import { Head, Html, Main, NextScript } from 'next/document'
+
+export default function Document(props) {
+
+  return (
+    <Html
+      className="h-full scroll-smooth bg-white antialiased [font-feature-settings:'ss01']"
+      lang="en"
+    >
+      <Head>
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link
+          rel="preconnect"
+          href="https://fonts.gstatic.com"
+          crossOrigin="anonymous"
+        />
+        <link
+          rel="stylesheet"
+          href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Lexend:wght@400;500&display=swap"
+        />
+        <link rel="shortcut icon" href="/refinery/images/refinery-favicon.ico" />
+      </Head>
+      <body className="flex h-full flex-col overflow-y-hidden">
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  )
+}
diff --git a/postcss.config.js b/postcss.config.js
@@ -1,6 +1,9 @@
 module.exports = {
   plugins: {
     tailwindcss: {},
+    'postcss-focus-visible': {
+      replaceWith: '[data-focus-visible-added]',
+    },
     autoprefixer: {},
   },
 }
diff --git a/styles/tailwind.css b/styles/tailwind.css
@@ -16,8 +16,6 @@ html {
     -webkit-text-size-adjust: 100%;
     -moz-tab-size: 4;
     tab-size: 4;
-    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-    /* 4 */
 }
 
 
diff --git a/submodules/tailwind-config b/submodules/tailwind-config
@@ -0,0 +1 @@
+Subproject commit c0d5bb61b3e123ddab063a61d47b01e2dfe91c90
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -2,43 +2,7 @@ const defaultTheme = require('tailwindcss/defaultTheme')
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ['./src/**/*.{js,jsx,ts,tsx}'],
-  theme: {
-    fontSize: {
-      xs: ['0.75rem', { lineHeight: '1rem' }],
-      sm: ['0.875rem', { lineHeight: '1.5rem' }],
-      base: ['1rem', { lineHeight: '1.75rem' }],
-      lg: ['1.125rem', { lineHeight: '2rem' }],
-      xl: ['1.25rem', { lineHeight: '2rem' }],
-      '2xl': ['1.5rem', { lineHeight: '2rem' }],
-      '3xl': ['2rem', { lineHeight: '2.5rem' }],
-      '4xl': ['2.5rem', { lineHeight: '3.5rem' }],
-      '5xl': ['3rem', { lineHeight: '3.5rem' }],
-      '6xl': ['3.75rem', { lineHeight: '1' }],
-      '7xl': ['4.5rem', { lineHeight: '1.1' }],
-      '8xl': ['6rem', { lineHeight: '1' }],
-      '9xl': ['8rem', { lineHeight: '1' }],
-    },
-    extend: {
-      borderRadius: {
-        '4xl': '2rem',
-      },
-      fontFamily: {
-        sans: ['Inter', ...defaultTheme.fontFamily.sans],
-        mono: ['DM Mono', ...defaultTheme.fontFamily.mono],
-      },
-      maxWidth: {
-        '2xl': '40rem',
-      },
-    },
-  },
-  plugins: [require('@tailwindcss/forms')],
-  content: ['./src/**/*.{js,jsx,ts,tsx}', './submodules/react-components/**/*.{js,jsx,ts,tsx}'],
-  safelist: [
-    // new safelist logic https://tailwindcss.com/docs/content-configuration#using-regular-expressions
-    { pattern: /(text)-(slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(500|600|700|800)/ },
-    { pattern: /(border)-(slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(300|400|500)/ },
-    { pattern: /(bg)-(slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(50|100|200|300|500)/ },
-    { pattern: /grid-cols-(\d+)/ },
-  ],
+  presets: [
+    require('./submodules/tailwind-config/tailwind.config.js'),
+  ]
 }

Original file line number	Diff line number	Diff line change
`@@ -16,8 +16,6 @@ html {`
`16`	`16`	`-webkit-text-size-adjust: 100%;`
`17`	`17`	`-moz-tab-size: 4;`
`18`	`18`	`tab-size: 4;`
`19`		`- font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";`
`20`		`- /* 4 */`
`21`	`19`	`}`
`22`	`20`
`23`	`21`