[v4] How to update my v3 config to v4 by Next.js?

[10000leaves]

I would like to make "tailwind.config.ts" compatible with v4.

    "@tailwindcss/postcss": "^4.0.3",
    "next": "15.1.6",
    "process": "^0.11.10",
    "react": "19.0.0",
    "react-dom": "19.0.0",
    "tailwindcss": "^4.0.3",

// tailwind.config.ts
import type { Config } from 'tailwindcss';

const config: Config = {
  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
  theme: {
    extend: {
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
        'gradient-conic':
          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
      },
      spacing: {
        '1/10': '10%',
        '2/10': '20%',
        '3/10': '30%',
        '4/10': '40%',
        '5/10': '50%',
        '6/10': '60%',
        '7/10': '70%',
        '8/10': '80%',
        '9/10': '90%',
      },
      animation: {
        fall: 'fall 5s linear infinite',
      },
      keyframes: {
        fall: {
          '0%': { transform: 'translateY(-100%)' },
          '100%': { transform: 'translateY(100%)' },
        },
        loading: {
          '0%': { transform: 'translateX(-100%)' },
          '100%': { transform: 'translateX(100%)' },
        },
      },
    },
  },
  safelist: [
    {
      pattern: /fill-(blue|red|green|yellow|purple|pink|indigo|gray)-600/,
    },
  ],
  plugins: [require('@tailwindcss/typography')],
};

export default config;

Right now, I'm tentatively doing the following.
css does not work with this setting.

// tailwind.config.ts
import type { Config } from 'tailwindcss';

const config: Config = {
  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
  theme: {
    extend: {
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
        'gradient-conic':
          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
      },
      spacing: {
        '1/10': '10%',
        '2/10': '20%',
        '3/10': '30%',
        '4/10': '40%',
        '5/10': '50%',
        '6/10': '60%',
        '7/10': '70%',
        '8/10': '80%',
        '9/10': '90%',
      },
      animation: {
        fall: 'fall 5s linear infinite',
      },
      keyframes: {
        fall: {
          '0%': { transform: 'translateY(-100%)' },
          '100%': { transform: 'translateY(100%)' },
        },
        loading: {
          '0%': { transform: 'translateX(-100%)' },
          '100%': { transform: 'translateX(100%)' },
        },
      },
    },
  },
};

export default config;

// src/app/globals.css
@import 'tailwindcss';
@plugin '@tailwindcss/typography';

@config '../../tailwind.config.ts';

/*
  The default border color has changed to `currentColor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }
}

.fill-blue-600 {
  fill: #2563eb;
}
.fill-red-600 {
  fill: #dc2626;
}
.fill-green-600 {
  fill: #16a34a;
}
.fill-yellow-600 {
  fill: #ca8a04;
}
.fill-purple-600 {
  fill: #7e22ce;
}
.fill-pink-600 {
  fill: #db2777;
}
.fill-indigo-600 {
  fill: #4f46e5;
}
.fill-gray-600 {
  fill: #4b5563;
}

[wongjn]

For safelist, you can make a plain text file somewhere and add your classes into it, i.e. safelist.txt.

[10000leaves]

Thank you, I'll give it a try.