I cannot change theme default primary color to purple color to make consistency of my project.

[Bishalsnghd07]

Unable to change text color and background colour of modal which get open automatically when click on datepicker icon.

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}',
// './src/**/.{html,js}',
'./src//*.{js,ts,jsx,tsx}',
'./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: {
'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',
},
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],
};

[Bishalsnghd07]

Please response it's very important.......... @juujisai @julien @DanielApt @MichaelTamm @pauljmartinez @hatashiro

[iprzybysz]

Hi, you can change text and background color of datepicker modal using class customization.

Here is an example code:

<div
  class="relative mb-3"
  data-te-datepicker-init
  data-te-input-wrapper-init
  data-te-class-modal-container="flex flex-col fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[328px] h-[512px] bg-red-500 text-white rounded-[0.6rem] shadow-lg z-[1066] xs:max-md:landscape:w-[475px] xs:max-md:landscape:h-[360px] xs:max-md:landscape:flex-row dark:bg-zinc-700"
>
 <input
   type="text"
   class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
   placeholder="Select a date" 
 />
 <label
   for="floatingInput"
   class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[te-input-state-active]:-translate-y-[0.9rem] peer-data-[te-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
  >Select a date</label
 >
</div>

[Bishalsnghd07]

It stuck unable to close the model after opening.

[iprzybysz]

Could you provide your code with this issue so that I would be able to reproduce it on my device?

[Bishalsnghd07]

The problem is after importing this tw-elements library in tailwind.config.js component, my problem related to datepicker is solved but I think tw-elements library is overriding other ui texts. Other ui texts is showing in bold text font or dark text. How, to solve it?

tailwind.config.js component code:

/** @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))',
},
},
},
plugins: [require('@headlessui/tailwindcss'), twElementsPlugin],
darkMode: 'class',
};

globals.css component:
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {

• {
  @apply focus:outline-0;
  }

html {
font-weight: 400;
word-break: break-word;
color: #3f4c5a;
line-height: 1.5;
}

html,
body {
@apply overflow-x-hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
@apply font-medium text-fs-charcoal;
}

h1 {
@apply text-fs-54;
}

h2 {
@apply text-fs-48;
}

h3 {
@apply text-fs-28;
}
}

@layer components {
.cool-link::after {
content: '';
display: block;
width: 0;
height: 2px;
transition: width 0.4s;
}
.cool-link-active::after {
width: 100%;
transition: width 0.4s;
}

.tooltip {
position: relative;
display: inline-block;
}

.tooltip .tooltiptext {
visibility: hidden;
position: absolute;
z-index: 1;
bottom: 100%;
opacity: 0;
transition: opacity 1s;
}

.tooltip:hover .tooltiptext {
visibility: visible;
width: 100%;
opacity: 1;
}

.fs-link {
@apply text-fs-purple underline transition hover:text-fs-charcoal hover:underline-offset-2;
@apply focus:text-fs-charcoal focus:underline-offset-2;
}

.fs-link-slate {
@apply text-fs-slate underline transition hover:text-fs-charcoal hover:underline-offset-2;
@apply focus:text-fs-charcoal focus:underline-offset-2;
}

.fs-review-bubble {
@apply relative mt-14 rounded-3xl pb-6 pl-7 pr-28 pt-8 text-center;
background-color: #252632;
}

.fs-review-bubble::before {
@apply absolute z-20 h-0 w-0 border-solid;
bottom: -21px;
left: calc(50% - 24px);
content: ' ';
border-width: 24px 21px 0 21px;
border-color: #252632 transparent transparent transparent;
}

.fs-stepper-circle {
@apply flex h-10 w-10 shrink-0 items-center justify-center rounded-full lg:h-12 lg:w-12;
}

.fs-stepper-before-line {
@apply before:inline-block before:h-px before:w-full before:border-b before:content-[''];
}

.fs-stepper-after-line {
@apply after:inline-block after:h-px after:w-full after:border-b after:content-[''];
}

.fs-stepper-label {
@apply text-fs-14 flex w-full items-center pt-3 text-fs-slate;
}

.fs-nav-item {
@apply text-fs-16 ripple my-2 flex min-h-[50px] w-full cursor-pointer items-center justify-start rounded-5 border
border-transparent px-6 capitalize text-fs-charcoal transition-all hover:scale-101 hover:text-fs-purple focus-visible:ring-1
focus-visible:ring-fs-purple active:scale-99;
}

.fs-nav-item:hover svg path,
.fs-nav-item-active svg path {
@apply fill-fs-purple;
}

.fs-nav-item-active {
@apply relative bg-fs-light-purple text-fs-purple;
}

.fs-nav-item-active::before {
@apply absolute z-20 w-0 border-solid border-fs-purple;
height: 30px;
border-radius: 40px;
left: 0;
content: ' ';
border-width: 2px;
}

.fs-nav-item-collapsed {
@apply my-0 box-content justify-center rounded-none py-2;
}

.fs-circle-button {
@apply text-fs-16 ripple flex h-9 w-9 shrink-0 items-center justify-center rounded-[100%]
transition-all hover:opacity-90 focus:opacity-90 focus-visible:ring-1 focus-visible:ring-fs-purple active:scale-99;
}

.fs-circle-button:hover svg path {
@apply stroke-fs-purple;
}

.fs-avatar-dropdown {
@apply bg-white;
border-radius: 0px 0px 5px 5px;
border: 1px solid #ebebeb;
box-shadow: 0px 4px 54px 0px rgba(0, 0, 0, 0.1);
}

.fs-avatar-dropdown-item {
@apply ripple w-full cursor-pointer px-5 py-2.5 text-left text-base transition hover:bg-fs-light-purple hover:text-fs-purple active:scale-99;
}
}

@layer utilities {
.scroll-hidden {
overflow: -webkit-scrollbar; /* Chrome, Edge, and Safari */

&::-webkit-scrollbar {
  display: none;
}

}

.text-fs-54 {
/* 54px /
font-size: 2.5rem;
font-size: clamp(2.5rem, 2.325rem + 0.875vw, 3.375rem);
}
.text-fs-48 {
/ 48px /
font-size: 2.25rem;
font-size: clamp(2.25rem, 2.1rem + 0.75vw, 3rem);
}
.text-fs-32 {
/ 32px /
font-size: 1.5rem;
font-size: clamp(1.5rem, 1.4rem + 0.5vw, 2rem);
}
.text-fs-28 {
/ 28px /
font-size: 1.3125rem;
font-size: clamp(1.3125rem, 1.225rem + 0.4375vw, 1.75rem);
}
.text-fs-24 {
/ 24px /
font-size: 1.125rem;
font-size: clamp(1.125rem, 1.05rem + 0.375vw, 1.5rem);
}
.text-fs-20 {
/ 20px /
font-size: 0.9375rem;
font-size: clamp(0.9375rem, 0.875rem + 0.3125vw, 1.25rem);
}
.text-fs-18 {
/ 18px /
font-size: 0.84375rem;
font-size: clamp(0.84375rem, 0.7875rem + 0.28125vw, 1.125rem);
}
.text-fs-16 {
/ 16px /
font-size: 0.75rem;
font-size: clamp(0.75rem, 0.7rem + 0.25vw, 1rem);
}
.text-fs-14 {
/ 14px /
font-size: 0.65625rem;
font-size: clamp(0.65625rem, 0.6125rem + 0.21875vw, 0.875rem);
}
.text-fs-13 {
/ 13px /
font-size: 0.609375rem;
font-size: clamp(0.609375rem, 0.56875rem + 0.203125vw, 0.8125rem);
}
.text-fs-12 {
/ 12px */
font-size: 0.5625rem;
font-size: clamp(0.5625rem, 0.525rem + 0.1875vw, 0.75rem);
}

.grayout {
filter: grayscale(90%);
}

.ripple {
position: relative;
overflow: hidden;
transform: translate3d(0, 0, 0);
}

.ripple:after {
content: '';
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
background-image: radial-gradient(circle, #000 10%, transparent 10.01%);
background-repeat: no-repeat;
background-position: 50%;
transform: scale(10, 10);
opacity: 0;
transition: transform 0.5s, opacity 1s;
}

.ripple:active:after {
transform: scale(0, 0);
opacity: 0.2;
transition: 0s;
}

.max-h-vp {
max-height: calc(100vh - 71px);
}

.max-w-vp {
max-width: calc(100vw - 280px);
}

@media only screen and (max-width: 820px) {
.max-w-vp {
max-width: calc(100vw - 30px);
}
}
@media only screen and (max-width: 369px) {
.max-w-vp {
max-width: calc(100vw - 15px);
}
}
.max-w-vp-collapsed {
max-width: calc(100vw - 90px);
}
}

The problem is after importing this tw-elements library in tailwind.config.js component, my problem related to datepicker is solved but I think tw-elements library is overriding other ui texts. Other ui texts is showing in bold text font or dark text. How, to solve it?

[iprzybysz]

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. I also answered you in your new post #2093.