Files
xevion.dev/tailwind.config.cjs
Xevion 0dcf6f93ba feat: migrate from Next.js Pages Router to App Router with Payload CMS
Complete architectural overhaul migrating from Directus+tRPC to Payload CMS with Next.js App Router. This represents a fundamental shift in how the application is structured and how data is managed.

Major changes:
- Migrated from Pages Router (src/pages/) to App Router (src/app/)
- Replaced Directus CMS with Payload CMS as the content management system
- Removed tRPC in favor of Payload's built-in API routes
- Added PostgreSQL database via Docker Compose for local development
- Implemented separate route groups for frontend and Payload admin
- Updated all API routes to App Router conventions
- Added Payload collections for Projects, Technologies, Links, Media, and Users
- Configured ESLint for new project structure

Infrastructure:
- Added docker-compose.yml for PostgreSQL database
- Updated environment variables for Payload CMS configuration
- Integrated @payloadcms/next for seamless Next.js integration
- Added GraphQL API and playground routes

Dependencies:
- Upgraded React from 18.2.0 to 19.2.0
- Upgraded Next.js to 15.5.6
- Added Payload CMS 3.x packages (@payloadcms/db-postgres, @payloadcms/next, etc.)
- Removed Directus SDK and tRPC packages
- Updated Sharp to 0.34.x
- Migrated to @tanstack/react-query v5
2025-10-26 00:58:10 -05:00

127 lines
2.9 KiB
JavaScript

const defaultTheme = require("tailwindcss/defaultTheme");
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: {
colors: {
zinc: {
850: "#1D1D20",
},
},
fontSize: {
"10xl": "10rem",
},
typography: {
DEFAULT: {
css: {
"code::before": {
content: '""',
},
"code::after": {
content: '""',
},
},
},
quoteless: {
css: {
"blockquote p:first-of-type::before": { content: "none" },
"blockquote p:first-of-type::after": { content: "none" },
},
},
},
dropShadow: {
extreme: "0 0 50px black",
},
fontFamily: {
inter: ['"Inter"', "sans-serif"],
roboto: ['"Roboto"', "sans-serif"],
mono: ['"Roboto Mono"', "monospace"],
hanken: ['"Hanken Grotesk"', "sans-serif"],
},
backgroundImage: {
"gradient-radial":
"radial-gradient(50% 50% at 50% 50%, var(--tw-gradient-stops))",
},
animation: {
"bg-fast": "fade 0.5s ease-in-out 0.5s forwards",
bg: "fade 1.2s ease-in-out 1.1s forwards",
"fade-in": "fade-in 2.5s ease-in-out forwards",
title: "title 3s ease-out forwards",
"fade-left": "fade-left 3s ease-in-out forwards",
"fade-right": "fade-right 3s ease-in-out forwards",
},
keyframes: {
fade: {
"0%": {
opacity: "0%",
},
"100%": {
opacity: "100%",
},
},
"fade-in": {
"0%": {
opacity: "0%",
},
"75%": {
opacity: "0%",
},
"100%": {
opacity: "100%",
},
},
"fade-left": {
"0%": {
transform: "translateX(100%)",
opacity: "0%",
},
"30%": {
transform: "translateX(0%)",
opacity: "100%",
},
"100%": {
opacity: "0%",
},
},
"fade-right": {
"0%": {
transform: "translateX(-100%)",
opacity: "0%",
},
"30%": {
transform: "translateX(0%)",
opacity: "100%",
},
"100%": {
opacity: "0%",
},
},
title: {
"0%": {
"line-height": "0%",
"letter-spacing": "0.25em",
opacity: "0",
},
"25%": {
"line-height": "0%",
opacity: "0%",
},
"80%": {
opacity: "100%",
},
"100%": {
"line-height": "100%",
opacity: "100%",
},
},
},
},
},
plugins: [require("@tailwindcss/typography")],
};