Upgrade Tailwind to v2

rgehan · Nov 19, 2023 · e1c1f0c · e1c1f0c
1 parent 1c65e32
commit e1c1f0c
Show file tree

Hide file tree

Showing 5 changed files with 141 additions and 4 deletions.
diff --git a/package.json b/package.json
@@ -62,6 +62,7 @@
     "@types/uuid": "^3.4.4",
     "@typescript-eslint/eslint-plugin": "^2.8.0",
     "@typescript-eslint/parser": "^2.19.2",
+    "autoprefixer": "^10.4.16",
     "cypress": "12.16.0",
     "eslint": "^6.7.2",
     "eslint-plugin-react": "^7.18.3",
@@ -73,7 +74,7 @@
     "puppeteer": "^2.0.0",
     "rimraf": "^3.0.2",
     "sass": "^1.24.2",
-    "tailwindcss": "^1.1.3",
+    "tailwindcss": "2",
     "ts-jest": "^24.3.0",
     "typescript": "^3.8.3"
   },

diff --git a/src/components/FilterLink/FilterLink.tsx b/src/components/FilterLink/FilterLink.tsx
@@ -46,7 +46,7 @@ export const FilterLink = compose<IInnerProps, IProps>(
     <div
       key={filter.id}
       className={cx(
-        'flex items-center text-right rtl pr-4 mb-3 cursor-pointer whitespace-no-wrap select-none',
+        'flex items-center text-right rtl pr-4 mb-3 cursor-pointer whitespace-nowrap select-none',
         `hover:${activeColor}`,
         isSelected ? activeColor : 'text-gray-600'
       )}

diff --git a/src/providers/github/components/IssueCard/ContextualDropdown.tsx b/src/providers/github/components/IssueCard/ContextualDropdown.tsx
@@ -85,7 +85,7 @@ export const ContextualDropdown = compose<IInnerProps, IProps>(
           settingsStore.isDark
             ? 'bg-gray-700'
             : 'bg-white border border-gray-200',
-          'whitespace-no-wrap rounded shadow-lg',
+          'whitespace-nowrap rounded shadow-lg',
           'flex flex-col',
         ])}
       >

diff --git a/src/providers/jira/components/IssueCard/StatusBadge.tsx b/src/providers/jira/components/IssueCard/StatusBadge.tsx
@@ -22,7 +22,7 @@ export const StatusBadge = ({ issue }: IProps) => {
   return (
     <div
       className={cx(
-        'rounded px-2 py-1 ml-3 whitespace-no-wrap',
+        'rounded px-2 py-1 ml-3 whitespace-nowrap',
         COLORS_TO_STYLE[colorName as JiraColor]
       )}
     >

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -20,6 +20,142 @@ module.exports = {
         '4': '1rem',
       },
     },
+    screens: {
+      sm: '640px',
+      md: '768px',
+      lg: '1024px',
+      xl: '1280px',
+    },
+    fontSize: {
+      xs: '0.75rem',
+      sm: '0.875rem',
+      base: '1rem',
+      lg: '1.125rem',
+      xl: '1.25rem',
+      '2xl': '1.5rem',
+      '3xl': '1.875rem',
+      '4xl': '2.25rem',
+      '5xl': '3rem',
+      '6xl': '4rem',
+    },
+    colors: {
+      transparent: 'transparent',
+      current: 'currentColor',
+
+      black: '#000',
+      white: '#fff',
+
+      gray: {
+        100: '#f7fafc',
+        200: '#edf2f7',
+        300: '#e2e8f0',
+        400: '#cbd5e0',
+        500: '#a0aec0',
+        600: '#718096',
+        700: '#4a5568',
+        800: '#2d3748',
+        900: '#1a202c',
+      },
+      red: {
+        100: '#fff5f5',
+        200: '#fed7d7',
+        300: '#feb2b2',
+        400: '#fc8181',
+        500: '#f56565',
+        600: '#e53e3e',
+        700: '#c53030',
+        800: '#9b2c2c',
+        900: '#742a2a',
+      },
+      orange: {
+        100: '#fffaf0',
+        200: '#feebc8',
+        300: '#fbd38d',
+        400: '#f6ad55',
+        500: '#ed8936',
+        600: '#dd6b20',
+        700: '#c05621',
+        800: '#9c4221',
+        900: '#7b341e',
+      },
+      yellow: {
+        100: '#fffff0',
+        200: '#fefcbf',
+        300: '#faf089',
+        400: '#f6e05e',
+        500: '#ecc94b',
+        600: '#d69e2e',
+        700: '#b7791f',
+        800: '#975a16',
+        900: '#744210',
+      },
+      green: {
+        100: '#f0fff4',
+        200: '#c6f6d5',
+        300: '#9ae6b4',
+        400: '#68d391',
+        500: '#48bb78',
+        600: '#38a169',
+        700: '#2f855a',
+        800: '#276749',
+        900: '#22543d',
+      },
+      teal: {
+        100: '#e6fffa',
+        200: '#b2f5ea',
+        300: '#81e6d9',
+        400: '#4fd1c5',
+        500: '#38b2ac',
+        600: '#319795',
+        700: '#2c7a7b',
+        800: '#285e61',
+        900: '#234e52',
+      },
+      blue: {
+        100: '#ebf8ff',
+        200: '#bee3f8',
+        300: '#90cdf4',
+        400: '#63b3ed',
+        500: '#4299e1',
+        600: '#3182ce',
+        700: '#2b6cb0',
+        800: '#2c5282',
+        900: '#2a4365',
+      },
+      indigo: {
+        100: '#ebf4ff',
+        200: '#c3dafe',
+        300: '#a3bffa',
+        400: '#7f9cf5',
+        500: '#667eea',
+        600: '#5a67d8',
+        700: '#4c51bf',
+        800: '#434190',
+        900: '#3c366b',
+      },
+      purple: {
+        100: '#faf5ff',
+        200: '#e9d8fd',
+        300: '#d6bcfa',
+        400: '#b794f4',
+        500: '#9f7aea',
+        600: '#805ad5',
+        700: '#6b46c1',
+        800: '#553c9a',
+        900: '#44337a',
+      },
+      pink: {
+        100: '#fff5f7',
+        200: '#fed7e2',
+        300: '#fbb6ce',
+        400: '#f687b3',
+        500: '#ed64a6',
+        600: '#d53f8c',
+        700: '#b83280',
+        800: '#97266d',
+        900: '#702459',
+      },
+    },
   },
   variants: {
     backgroundColor: ['responsive', 'hover', 'active'],