docs: tailwind typescript config (#154)

* docs: tailwind typescript Signed-off-by: Adam Setch <adam.setch@outlook.com> * docs: tailwind typescript Signed-off-by: Adam Setch <adam.setch@outlook.com> * docs: tailwind typescript Signed-off-by: Adam Setch <adam.setch@outlook.com> --------- Signed-off-by: Adam Setch <adam.setch@outlook.com>
setchy · Sep 27, 2024 · afaaecb · afaaecb
1 parent d2ede6a
commit afaaecb
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 16 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,13 +1,16 @@
-# Mac Files
-.DS_Store
-
 # Build files
 dist/
 build/
 
 # Dependency directories
 node_modules/
 
+# Astro Docs
+.astro/
+
 # Coverage directory used by tools like istanbul
 coverage
-*.lcov
+*.lcov
+
+# Mac Files
+.DS_Store
diff --git a/docs/src/layouts/Layout.astro b/docs/src/layouts/Layout.astro
@@ -2,7 +2,7 @@
 import Footer from '../components/Footer.astro';
 import GoogleAnalytics from '../components/GoogleAnalytics.astro';
 import Navbar from '../components/Navbar.astro';
-import '../app.css';
+import '../styles/app.css';
 
 import { siteMetadata } from '../constants';
 

diff --git a/docs/src/app.css → docs/src/styles/app.css b/docs/src/app.css → docs/src/styles/app.css
diff --git a/docs/tailwind.config.cjs → docs/tailwind.config.ts b/docs/tailwind.config.cjs → docs/tailwind.config.ts
@@ -1,5 +1,8 @@
-/**@type {import("tailwindcss").Config} */
-module.exports = {
+import type { Config } from 'tailwindcss';
+import TailwindCSSAnimate from 'tailwindcss-animate';
+import TailwindCSSTypography from '@tailwindcss/typography';
+
+const config: Config = {
   darkMode: ['class', '[data-kb-theme="dark"]'],
   content: ['./src/**/*.{astro,ts,tsx}'],
   theme: {
@@ -11,20 +14,20 @@ module.exports = {
       },
       keyframes: {
         'accordion-down': {
-          from: { height: 0 },
+          from: { height: '0' },
           to: { height: 'var(--kb-accordion-content-height)' },
         },
         'accordion-up': {
           from: { height: 'var(--kb-accordion-content-height)' },
-          to: { height: 0 },
+          to: { height: '0' },
         },
         'content-show': {
-          from: { opacity: 0, transform: 'scale(0.96)' },
-          to: { opacity: 1, transform: 'scale(1)' },
+          from: { opacity: '0', transform: 'scale(0.96)' },
+          to: { opacity: '1', transform: 'scale(1)' },
         },
         'content-hide': {
-          from: { opacity: 1, transform: 'scale(1)' },
-          to: { opacity: 0, transform: 'scale(0.96)' },
+          from: { opacity: '1', transform: 'scale(1)' },
+          to: { opacity: '0', transform: 'scale(0.96)' },
         },
       },
       animation: {
@@ -35,5 +38,7 @@ module.exports = {
       },
     },
   },
-  plugins: [require('tailwindcss-animate'), require('@tailwindcss/typography')],
+  plugins: [TailwindCSSAnimate, TailwindCSSTypography],
 };
+
+export default config;
diff --git a/docs/ui.config.json b/docs/ui.config.json
@@ -2,8 +2,8 @@
   "tsx": true,
   "componentDir": "./src/components/ui",
   "tailwind": {
-    "config": "tailwind.config.cjs",
-    "css": "src/app.css"
+    "config": "tailwind.config.ts",
+    "css": "src/styles/app.css"
   },
   "aliases": {
     "path": "~/*"