tw-elements plugin overlap the other plugins #2093
Replies: 2 comments 13 replies
-
|
We can't guarantee everything will work properly with other UI kits, but you can try changing the order in which styles are added. Perhaps that might resolve the issue. |
Beta Was this translation helpful? Give feedback.
-
|
Do I change the name of component tailwind.config.js to tailwind.config.cjs ? In this page in step-2: "Tailwind file" written in "tailwind.config.cjs" and I created in my project as "tailwind.config.js" please check this do I have to change my file name from "tailwind.config.js" to "tailwind.config.cjs"? 👉 https://tw-elements.com/docs/standard/integrations/next-integration/ |
Beta Was this translation helpful? Give feedback.
-
|
Please check this code, it's very important, I'm stuck in this from 2 days, please give precedence to this it's a request from my side. Just a small mistakes I'm doing I think and unable to find it's solution, stucked in this. Problem is just when I add this tw-plugin 👉 require('tw-elements/dist/plugin.cjs'). It overlap my another plugin and the other texts font are getting changed.
|
Beta Was this translation helpful? Give feedback.
-
You don't have to change it if everything works. Check out this discussion to learn more about |
Beta Was this translation helpful? Give feedback.
-
As @juujisai said
|
Beta Was this translation helpful? Give feedback.
-
|
ok Thanks |
Beta Was this translation helpful? Give feedback.
-
|
We do not guarantee the compatibility with other UI packages. You can try to play a bit with the order of loading css files but some of the components could properly then. In the future we are planning to add support for prefixes that could be helpful in such cases. |
Beta Was this translation helpful? Give feedback.
-
|
ok |
Beta Was this translation helpful? Give feedback.
-
|
One more thing want to know, Do I have to change the name of component tailwind.config.js to tailwind.config.cjs ? In this page in step-2: "Tailwind file" written in "tailwind.config.cjs" and I created in my project as "tailwind.config.js" please check this do I have to change my file name from "tailwind.config.js" to "tailwind.config.cjs"? 👉 https://tw-elements.com/docs/standard/integrations/next-integration/ |
Beta Was this translation helpful? Give feedback.
-
|
Please stop spamming and please wait for the response from @iprzybysz |
Beta Was this translation helpful? Give feedback.
-
I'm using typescript, next.js, tailwind css, headlessui and tw-elements plugin in my project. I'm working on datepicker, for that I have to install tw-elements plugin to apply changes, but the problem is tw plugin overlap the other ui text. I want my other ui text and sizes as it is as before, just want to change in datepicker component. Can you please help me to get desired result? I also change the theme in "tailwind.config.js" file to get my desire theme and it is absolutely working fine.
tailwind.config.js component:
/** @type {import('tailwindcss').Config} /
const twElementsPlugin = require('tw-elements/dist/plugin.cjs');
module.exports = {
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/dist/js/**/.js',
],
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: {
primary: {
DEFAULT: '#8B3DFF',
},
'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))',
},
},
},
darkMode: 'class',
plugins: [require('@headlessui/tailwindcss'), twElementsPlugin],
};
Beta Was this translation helpful? Give feedback.
All reactions