When i reload my page, my toggle-buttons which are hidded by making opacity-0 appears on flash. Is there any way to stop these flashes from appearing on reload and keep the (opacity-0) items hidden as intended? Live Site URL Codebase-Github Repo Answer One solution is to make all three themes hidden by default and onload method, you decide which theme
Tag: tailwind-css
React Tailwind Dynamic Div Height Not Updating Post Calculation
I have a screen which has two divs: top navbar (80px in height) and a div component below the navbar (remaining screen height). Since I am using tailwind formatting looks something like this: The problem, navbar is 80px and bottom content is dynamic but a white gap appears at the bottom. White gap will disappear if using h-screen (100% vw).
Fixed Left- 0 (TailwindCss) overlaping body content
i have an issue on my project i’am working on, i have a SIDEBAR and a TOPHEADER(NAVBAR).., now the issue starts when i want to have a FIXED SIDEBAR without it obscuring other page elements like TopHeader/Navbar and body content to the left side of the page.. tried adding ml-20 on topHeader div but that didnt help as it just
How to change the locale in Flowbite datepicker?
Unfortunately the Flowbite Datepicker Documentation has no instruction on how to use another locale, but the support is there. This is how I implemented the datepicker (working): and this is how I try to get the locale to work: But my modular Javascript understanding is too poor to get this right. This is the file to reference the original code.
Tailwind custom pseudo element
I’m trying to create a single js file for a component that is used with several styles in my project. On one page I have several buttons for some features, with a default background color set in the html file (for exemple bg-gray-500). For buttons where the feature is activated I change the background color, currently with js, but therefore
how to make tailwind utility class dynamic
I want to create a simple square using tailwind, but I want to make the class dynamic Answer TailwindCSS doesn’t allow you to generate classes dynamically. So when you use the following to generate the class… …TailwindCSS will not pick that up as a valid TailwindCSS class and therefore will not produce the necessary CSS. Instead, you must include the
Tailwindcss not rendering in ExpressJS/React app
I am trying to add TailwindCSS to my existing Express JS + React application. I have tried many different tutorials, such as this one https://tailwindcss.com/docs/installation for regular JS, and this one made specifically for Create-React-App https://tailwindcss.com/docs/guides/create-react-app . I later tried this tutorial for express js https://daily.dev/blog/how-to-use-tailwindcss-with-node-js-express-and-pug My project was initially made with Create-React-App, but I later changed everything to run
Tailwind animation plays twice when changing pages in Next.js?
I’m using react-hot-toast to show alerts & animate it while changing pages. The animation plays fades in twice when page changes. I’m using tailwindcss-animate in my tailwind.config.js to add animation classes. I’m only using 4 animation classes: animate-in, animate-out, fade-in, & fade-out I am animating a custom Success alert box. Success.tsx If you click the link in the demo below,
Use mui icons between components in react
So I am trying to use mui icons between components. I am using the <Icon /> component but there are two problems with that: Only half of the icon is rendered. I cannot style the icon in the component but instead have to style it where im using the component src/components/sidebar/Sidebar.comp.js (Where im using the icon component) ./SidebarOption.comp.js (Where im
How can i get the pinterest-like layout with tailwind and react?
i’m trying to get a pinterest-like layout but i cannot achieve it, Here is what i want : and here is what i get : Here is the div of the card : and here is the div that map all the card : i tried flex-wrap, i tried grid but it doesn’t work, where is my error please ?