将自定义tailwindcss类添加到Next.js-Tailwind项目

Question

我有一个 Next.js-Tailwind 项目，我想向其中添加自定义类，以便我可以在项目中的任何位置使用它们。

我尝试过一些类似的方法，但似乎不起作用。

tailwind.config.js：

module.exports = {
    purge: [
        './pages/**/*.{js,ts,jsx,tsx}',
        './components/**/*.{js,ts,jsx,tsx}',
    ],
    darkMode: false, // or 'media' or 'class'
    theme: {
        extend: {
            height: {
                '60': '60rem',
                '40': '40rem',
                '55': '55rem',
                '180': '180px',
            },
            colors: {
                'primary': '#0B003A',
            },
        },
    },
    variants: {
        extend: {},
    },
    plugins: [require('@tailwindcss/typography')],
}

我需要做什么才能在整个项目中全局使用这些类？

Answer 1

如果没有找到，您可以简单地将 styles 文件夹添加到 src (src/styles/) 中，并创建适合您的文件名 (global.css/styles.css/index.css)，现在您可以创建自定义类以及您项目的组件。