Open leebenson opened 4 months ago
Describe the bug
After following the setup instructions for a NextJS project, including this line:
import "tw-elements-react/dist/css/tw-elements-react.min.css";
... seems to overwrite custom color classes in tailwind.config.css set in the theme.extend.colors section.
tailwind.config.css
theme.extend.colors
To Reproduce
Using this tailwind.config.ts:
tailwind.config.ts
import type { Config } from "tailwindcss"; const config: Config = { content: [ "./src/pages/**/*.{js,ts,jsx,tsx,mdx}", "./src/components/**/*.{js,ts,jsx,tsx,mdx}", "./src/app/**/*.{js,ts,jsx,tsx,mdx}", "./node_modules/tw-elements-react/dist/js/**/*.js", ], theme: { extend: { colors: { honeydew: "#f1faee", } }, }, corePlugins: { preflight: false, }, plugins: [require("tw-elements-react/dist/plugin.cjs")], }; export default config;
... And then use the color in any component:
<div className="bg-honeydew">This should be Honeydew but it isn't!</div>
Expected behavior
The resulting CSS should contain the extended theme colour class names.
Actual behavior
The class names don't exist in the resulting CSS and therefore styles aren't applied.
Hi @leebenson, just don't import our CSS file, because you have custom Tailwind config for your project. However, if these styles are needed for you, place them before your custom Tailwind styles will be added.
Describe the bug
After following the setup instructions for a NextJS project, including this line:
... seems to overwrite custom color classes in
tailwind.config.css
set in thetheme.extend.colors
section.To Reproduce
Using this
tailwind.config.ts
:... And then use the color in any component:
Expected behavior
The resulting CSS should contain the extended theme colour class names.
Actual behavior
The class names don't exist in the resulting CSS and therefore styles aren't applied.