Merge pull request #13 from Indie-Creator-Community/feat/tailwind-ani…

…mations-and-fluid-typography

Feature: tailwind animations and fluid typography

apps/nextjs/package.json

@@ -38,7 +38,7 @@
     "dotenv-cli": "^7.2.1",
     "eslint": "^8.38.0",
     "postcss": "^8.4.22",
-    "tailwindcss": "^3.3.1",
+    "tailwindcss": "^3.4.10",
     "typescript": "^5.0.4"
   }
 }

package.json

@@ -38,6 +38,7 @@
     "prettier-plugin-prisma": "^4.10.0",
     "prettier-plugin-tailwindcss": "^0.6.6",
     "side-ui": "^0.15.1",
+    "tailwindcss-animated": "^1.1.2",
     "tailwindcss-scrollbar": "^0.1.0",
     "turbo": "^2.1.2",
     "typescript": "^5.0.4"

tailwind.config.js

@@ -1,12 +1,42 @@
-/**
- * @type {import('tailwindcss').Config}
- */
-
+/** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ['./src/**/*.tsx', '../../node_modules/side-ui/**/*.{js,jsx,ts,tsx}'],
+  presets: [require('./node_modules/side-ui/dist/tailwind.config')],
   theme: {
-    extend: {},
+    extend: {
+      animationDelay: {
+        400: '400ms',
+        600: '600ms',
+        800: '800ms',
+        '3s': '3s',
+        '5s': '5s',
+        '10s': '10s',
+        '15s': '15s',
+        '20s': '20s',
+      },
+      animationDuration: {
+        400: '400ms',
+        600: '600ms',
+        800: '800ms',
+        '3s': '3s',
+        '5s': '5s',
+        '10s': '10s',
+        '15s': '15s',
+        '20s': '20s',
+      },
+      fontSize: {
+        'fluid-base': 'clamp(0.75rem, 2vw, 1rem)',
+        'fluid-lg': 'clamp(1rem, 4vw, 1.5rem)',
+        'fluid-xl': 'clamp(1.5rem, 6vw, 2.5rem)',
+        'fluid-2xl': 'clamp(2rem, 9vw, 3.5rem)',
+      },
+      screens: {
+        '3xs': '240px',
+        '2xs': '360px',
+        xs: '480px',
+      },
+    },
   },
-  presets: [require('./node_modules/side-ui/dist/tailwind.config')],
-  plugins: [require('tailwindcss-scrollbar')],
+
+  plugins: [require('tailwindcss-scrollbar'), require('tailwindcss-animated')],
 };