tw-element plugin overlap my other plugin.

[Bishalsnghd07]

Hi, I'm using next.js and typescript in my project. And I already installed tailwind headlessui plugin and I want to install tw-elements plugin to apply in datepicker. But, the problem is tw-element plugin overlap the other plugin. I'm sharing you my code structure of tailwind.config.js file, please take a look into it and provide me the exact solution.

Tailwind.config.js component

/** @type {import('tailwindcss').Config} /
module.exports = {
content: [
'./src/pages/**/.{js,ts,jsx,tsx,mdx}',
'./src/components//*.{js,ts,jsx,tsx,mdx}',
'./src/app//.{js,ts,jsx,tsx,mdx}',
],
theme: {
fontFamily: {
sans: ['var(--font-jakarta)'],
},
screens: {
exs: '320px',
// => @media (min-width: 370px) { ... }
xxs: '370px',
// => @media (min-width: 370px) { ... }
sm: '640px',
// => @media (min-width: 640px) { ... }
md: '768px',
// => @media (min-width: 768px) { ... }
lg: '1024px',
// => @media (min-width: 1024px) { ... }
xl: '1280px',
// => @media (min-width: 1280px) { ... }
'2xl': '1536px',
// => @media (min-width: 1536px) { ... }
},
extend: {
colors: {
'fs-dark-black': '#19154E',
'fs-purple': '#8B3DFF',
'fs-btn-gray': '##EEE',
'fs-light-table-heading': '#EAECF9',
'fs-light-table-row': '#E2E8F3',
'fs-charcoal': '#2C3652',
'fs-slate': '#3F4C5A',
'fs-placeholder-gray': '#6B778C',
'fs-background-gray': '#F3F3F4',
'fs-disabled-background-gray': '#e4e4e7',
'fs-disabled-field-gray': '#f5f5f5',
'fs-disabled-gray': '#a4a4a7',
'fs-border-gray': '#EAEEF5',
'fs-dropdown-border-gray': '#EBEBEB',
'fs-dropdown-bottom-gray': '#f4f6f8',
'fs-dropdown-text': '#081D34',
'fs-divider-gray': '#EFEFEF',
'fs-background-black': '#1E1F2B',
'fs-dark-text-gray': '#B7BFC7',
'fs-guide-gray': '#F8F9FA',
'fs-warning-yellow': '#FBBC05',
'fs-error-red': '#FF3E3E',
'fs-nav-separator': '#8B91A9',
'fs-light-purple': '#F6F0FF',
'fs-action-light-purple': '#EFF1FC',
'fs-tile-background': '#F9F9FE',
'fs-status-green': '#34A853',
'fs-status-orange': '#FF8D15',
'fs-status-gray': '#B5B5B5',
'fs-email-highlight': '#4285F4',
'fs-gray': '#505E84',
'fs-bg-green': '#DCFCE7',
'fs-text-green': '#3DD857',
'fs-bg-orange': '#FFF4DE',
'fs-text-orange': '#FF947A',
'fs-bg-purple': '#F3E8FF',
'fs-text-purple': '#BF83FF',
'fs-bg-pink': '#FFE2E5',
'fs-text-pink': '#FA5A7D',
'fs-bg-white': '#FFF6ED',
'fs-bg-csv': '#E1F0F1',
'fs-bg-icon': '#F2EBFE',
},
borderRadius: {
3: '3px',
5: '5px',
24: '24px',
40: '40px',
},
borderWidth: {
3: '3px',
32: '32px',
},
spacing: {
51: '12.75rem' / 204px /,
},
maxWidth: {
xxs: '200px',
'8xl': '85rem' / 1360px /,
},
gap: {
13: '3.25rem' / 52px /,
},
padding: {
7.5: '1.875rem' / 30px /,
},
lineHeight: {
7.5: '1.875rem' / 30px */,
},
scale: {
99: '0.99',
101: '1.01',
},
opacity: {
35: '0.35',
85: '0.85',
},
keyframes: {
fadeIn: {
'0%': { opacity: 0 },
'100%': { opacity: 1 },
},
},
animation: {
fadeIn: 'fadeIn 150ms ease',
},
zIndex: {
500: '500', // Workspace Loader
980: '980', // Header
990: '990', // Nav
1000: '1000', // Drawer Backdrop
1010: '1010', // Drawer
1100: '1100', // Dialog Backdrop
1110: '1110', // Dialog
2000: '2000', // Tooltips
},
gridTemplateColumns: {
'fs-application': 'repeat(auto-fill, 12.75rem)',
},
gridTemplateRows: {
8: 'repeat(8, minmax(0, 1fr))',
},
},
},
plugins: [require('@headlessui/tailwindcss')],
darkMode: 'class',
};

[juujisai]

Hi! There is already a discussion on this topic here #2093. Im closing this one