How to use theme configuration in newer css first approach of Tailwind

Starting from Tailwind v4 tailwind.config.ts is not supported/needed. Hence I am migrating v3 config of tailwind.config.ts. The below is existing code using tailwind.config.ts and I want to convert into css-first approach in v4

const config: Config = {
  darkMode: 'class',
  theme: {
    extend: {
      screens: {
        xs: '475px',
      },
      colors: {
        primary: {
          '100': '#FFE8F0',
          DEFAULT: '#EE2B69',
        },
        secondary: '#FBE843',
        black: {
          '100': '#333333',
          '200': '#141413',
          '300': '#7D8087',
          DEFAULT: '#000000',
        },
        white: {
          '100': '#F7F7F7',
          DEFAULT: '#FFFFFF',
        },
      },
      fontFamily: {
        'work-sans': ['var(--font-work-sans)'],
      },
      borderRadius: {
        lg: 'var(--radius)',
        md: 'calc(var(--radius) - 2px)',
        sm: 'calc(var(--radius) - 4px)',
      },
      boxShadow: {
        100: '2px 2px 0px 0px rgb(0, 0, 0)',
        200: '2px 2px 0px 2px rgb(0, 0, 0)',
        300: '2px 2px 0px 2px rgb(238, 43, 105)',
      },
    },
  },
};

Starting from v4, using tailwind.config.js is no longer required. Instead, Tailwind now prefers the use of new CSS-first directives for configuration.

• New CSS-first configuration option in v4 - StackOverflow
• Problem installing TailwindCSS with Vite, after "npx tailwindcss init -p" command - StackOverflow

By default, dark mode is based on the user's prefers-color-scheme setting. If you want to toggle dark mode manually using the .dark class, you need to configure it accordingly.

• TailwindCSS dark mode can't change or add class="dark" tag on production - StackOverflow

To customize your theme, you should use the @theme directive. This uses predefined namespaces as outlined in the documentation.

• How to use custom color themes in TailwindCSS v4 - StackOverflow

Here are some related helpful questions:

• What's breaking changes from TailwindCSS v4? - StackOverflow

Specifically, your configuration looks like this:

@import "tailwindcss";

@custom-variant dark (&:where(.dark, .dark *));

@theme {
  --breakpoint-xs: 475px;

  --color-primary-100: #FFE8F0;
  --color-primary: #EE2B69;
  --color-secondary: #FBE843;
  --color-black-100: #333333;
  --color-black-200: #141413;
  --color-black-300: #7D8087;
  --color-black: #000000;
  --color-white-100: #F7F7F7;
  --color-white: #FFFFFF;

  --font-work-sans: var(--font-work-sans);

  --radius-lg: var(--radius);
  --radius-md: calc(var(--radius) - 2px);
  --radius-sm: calc(var(--radius) - 4px);

  --shadow-100: 2px 2px 0px 0px rgb(0, 0, 0);
  --shadow-200: 2px 2px 0px 2px rgb(0, 0, 0);
  --shadow-300: 2px 2px 0px 2px rgb(238, 43, 105);
}