extending screenbreakpoints doesn't work

[azertyalex]

I have following config

const defaultTheme = require('tailwindcss/defaultTheme');
const colors = require('tailwindcss/colors');
// eslint-disable-next-line
const plugin = require('tailwindcss/plugin');
const formKitTailwind = require('@formkit/themes/tailwindcss');
const { createThemes } = require('tw-colors');

const darkColors = {
    50: '#ffffff',
    100: '#e6e6e6',
    200: '#333334',
    300: '#D1D5DB',
    400: '#9CA3AF',
    500: '#4EA5D9',
    600: '#22272D',
    700: '#1D2028',
    800: '#0E1117',
    900: '#01040A',
};

const actionTypeColors = {
    create: colors.green,
    delete: colors.orange,
    update: colors.orange,
    error: colors.red,
};

/** @type {import("@types/tailwindcss/tailwind-config").TailwindConfig } */
module.exports = {
    content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
    darkMode: 'class',
    safelist: [
        {
            pattern: /(bg|text)-(actionType).*/,
        },
        {
            pattern: /rounded-r-(md|none)/,
        },
    ],
    theme: {
        extends: {
            screens: {
                landscape: {
                    raw: '(orientation: landscape) and (max-height: 480px)',
                },
                statsxxl: '1500px',
                tk: '2000px',
                xxl: '2500px',
                xxxl: '3200px',
            },
        },
        fontFamily: {
            sans: [...defaultTheme.fontFamily.sans],
            serif: [...defaultTheme.fontFamily.serif],
            mono: [...defaultTheme.fontFamily.mono],
        },
    },
    plugins: [
        require('@tailwindcss/forms'),
        require('@tailwindcss/typography'),
        require('@tailwindcss/line-clamp'),
        require('@tailwindcss/aspect-ratio'),
        require('tailwindcss-debug-screens'),
        formKitTailwind,
        createThemes({
            'deep-koamaru': {
                primary: {
                    50: '#f3f5ff',
                    100: '#e9edfe',
                    200: '#d5dcff',
                    300: '#b4c0fe',
                    400: '#8996fc',
                    500: '#5962f9',
                    600: '#3837f0',
                    700: '#2a25dc',
                    800: '#221eb9',
                    900: '#1f1b97',
                    950: '#111279',
                },
                secondary: colors.gray,
                dark: darkColors,
                actionType: actionTypeColors,
            },
            'fountain-blue': {
                primary: {
                    50: '#f2fbfa',
                    100: '#d3f4f1',
                    200: '#a6e9e4',
                    300: '#72d6d3',
                    400: '#59c3c3',
                    500: '#2c9ea0',
                    600: '#217c80',
                    700: '#1e6467',
                    800: '#1c5053',
                    900: '#1c4245',
                    950: '#0a2629',
                },
                secondary: colors.gray,
                dark: darkColors,
                actionType: actionTypeColors,
            },
        }),
    ],
};

When using tw-colors my breakpoints aren't working

[L-Blondy]

What version of tailwind do you use ?

[azertyalex]

tailwind 3.3.2

[L-Blondy]

Breakpoints work just fine, you simply need to fix the typo

    theme: {
-       extends: {
+       extend: {
            screens: {
                landscape: {
                    raw: '(orientation: landscape) and (max-height: 480px)',
                },
                statsxxl: '1500px',
                tk: '2000px',
                xxl: '2500px',
                xxxl: '3200px',
            },
        },
        fontFamily: {
            sans: [...defaultTheme.fontFamily.sans],
            serif: [...defaultTheme.fontFamily.serif],
            mono: [...defaultTheme.fontFamily.mono],
        },
    },