Tailwind CSS v4: tailwind.config.js styles not applying after upgrading from v3

I recently upgraded my project from Tailwind CSS v3 to v4 and am using Next.js 16.0.8 with tailwindcss ^4.0.0. In v3, I relied heavily on tailwind.config.js for custom colors, font sizes, spacing, and theme extensions. After upgrading, those styles are no longer applied because Tailwind v4 removed the traditional config file. How should these v3 configuration values be migrated or reapplied correctly in Tailwind v4?

this is my main.css file in v4 version:

/*! tailwindcss-build-file - DO NOT REMOVE THIS COMMENT. It is used in /scripts/run-after-build.js */ /** * MAIN CSS ENTRY POINT - Tailwind CSS v4 * * This file is the single source of truth for all styles. * Import order matters! */ /* ========================================================================== 0. EXTERNAL FONTS (must be first @import per CSS spec) Google Fonts imports for fonts not supported by next/font TODO [TECH-DEBT]: Next.js 16 Upgrade - Remove Fustat import Remove this import once Fustat is migrated to next/font/google See public/fonts/zld.js for migration instructions ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Fustat:[email protected]&display=swap'); /* ========================================================================== 1. TAILWIND CSS v4 ========================================================================== */ @import 'tailwindcss'; /* ========================================================================== 2. TOKEN SYSTEM Primitives → Semantic → Theme Overrides ========================================================================== */ @import './tokens/semantic.css'; @import './tokens/themes/zld.css'; @import './tokens/themes/muv.css'; /* ========================================================================== 3. COMPONENT STYLES Legacy component utilities - migrate to semantic tokens incrementally ========================================================================== */ @import './style.css'; /* ========================================================================== 4. TAILWIND v4 SOURCE DETECTION Tell Tailwind where to scan for classes ========================================================================== */ @source "../components/**/*.{js,ts,jsx,tsx}"; @source "../src/**/*.{js,ts,jsx,tsx}"; @source "../app/**/*.{js,ts,jsx,tsx}"; @source "../pages/**/*.{js,ts,jsx,tsx}"; .footer-nav-section details > summary::-webkit-details-marker { display: none; } .footer-nav-section details > summary::marker { content: ''; } .footer-nav-section details > summary { -webkit-appearance: none; appearance: none; list-style: none; }

tailwind.config.js:

const plugin = require('tailwindcss/plugin') const colors = require('./tailwindcolors') module.exports = { content: [ './components/**/*.{js,ts,jsx,tsx,mdx}', './src/**/*.{js,ts,jsx,tsx,mdx}', './app/**/*.{js,ts,jsx,tsx,mdx}', './pages/**/*.{js,ts,jsx,tsx}', './safelist.txt', './safelist/**/*.{js,ts,jsx,tsx,mdx,html}', './public/global**.{js,ts,jsx,tsx}', './data/*.js' ], theme: { colors: { ...colors }, fontSize: { xs: ['var(--text-size-xs)', '150%'], sm: ['var(--text-size-sm)', '150%'], base: ['var(--text-size-base)', '150%'], lg: ['var(--text-size-lg)', '140%'], xl: ['var(--text-size-xl)', '140%'], '2xl': ['var(--text-size-2xl)', '130%'], '3xl': ['var(--text-size-3xl)', '120%'], '4xl': ['var(--text-size-4xl)', '120%'], '5xl': ['var(--text-size-5xl)', '120%'], '6xl': ['var(--text-size-6xl)', '120%'], '7xl': ['var(--text-size-7xl)', '120%'], '8xl': ['var(--text-size-8xl)', '120%'], '9xl': ['var(--text-size-9xl)', '120%'] }, fontFamily: { body: 'var(--font-body)', heading: 'var(--font-heading)', graphic: 'var(--font-graphic)' }, screens: { sm: '576px', md: '768px', lg: '1024px', xl: '1200px', '2xl': '1400px' }, extend: { borderRadius: { none: 'var(--rounded-none)', sm: 'var(--rounded-sm)', DEFAULT: 'var(--rounded)', lg: 'var(--rounded-lg)', xl: 'var(--rounded)', full: 'var(--rounded-full)' }, backgroundImage: { clouds: "url('/assets/images/labor-day/cloud.jpeg')" }, fontWeight: { thin: '300', hairline: '300', extralight: '300', light: '300', normal: '400', medium: '500', semibold: '600', bold: '700', extrabold: '700', 'extra-bold': '700' }, animation: { fadeout: 'fadeOut 1s linear', fadein: 'fadeIn 1s linear', slidertimer: 'sliderTimer 8s linear', marquee: 'marquee 25.25s linear infinite', marquee2: 'marquee2 25.25s linear infinite' }, keyframes: { fadeOut: { '0%': {opacity: '1'}, '100%': {opacity: '0'} }, fadeIn: { '0%': {opacity: '0'}, '100%': {opacity: '1'} }, sliderTimer: { '0%': {width: '0%'}, '100%': {width: '100%'} }, marquee: { '0%': {transform: 'translateX(0)'}, '100%': {transform: 'translateX(-100%)'} }, marquee2: { '0%': {transform: 'translateX(100%)'}, '100%': {transform: 'translateX(0)'} } } } }, plugins: [ plugin(function ({addBase, theme}) { addBase({ button: {borderColor: '#333'} }) }) ], variants: { extend: { fontWeight: ['hover'] } } }