Beautiful UI components, crafted with Tailwind CSS. By the makers of Tailwind CSS.
Questions tagged [tailwind-ui]
249 questions
20
votes
3 answers
Default colors given in tailwind documentation are not working
I was trying to use colors such as amber and lime, which are mentioned in the documentation. These colors didn't work. Only colors with names such as the primary color name (eg. red, pink) worked.
Colors which are not working: amber, emerald, lime,…
Poornima T
- 263
- 1
- 2
- 8
11
votes
12 answers
Don't close Dialog(Modal) when click outside in React & HeadlessUI
my problem is simple ... I'm using HeadlessUI's Dialog component for React in my app and when I click out of modal I wish it wouldn't close.
In the documentation, there is the Dialog. Overlay parameter that deals with this interaction but there are…
Salvatore Marotta
- 111
- 1
- 1
- 6
9
votes
1 answer
Headless UI open one of the Disclosure's on init
I'm having trouble opening one of the 2 Disclosure.
Attached below is what trying to achieve this and when I add the static prop it keeps it open indefinitely.
Ishai A.
- 103
- 1
- 6
8
votes
2 answers
How to apply Tailwind UI animation in plain HTML/JS
I am trying to use sample tailwindui.com components.
They have the animation part defined in the comments, but I am not able to make out how I should those in my code. I am using plain html/js and would prefer to not use any framework/lib for…
Rishav Sharan
- 2,763
- 8
- 39
- 55
7
votes
2 answers
How to uninstall tailwind from my react application?
I have installed react-bootstrap and tailwind together for my react app. I'm getting some conflict using both of them. So I want to uninstall tailwind.
Shawon
- 73
- 1
- 1
- 3
7
votes
4 answers
Group Disclosures (Accordian) from Headless UI
I've just started using Headless UI. I'm trying to use the Disclosure component from Headless UI to render my job experiences.
Basically, I need "n" number of Disclosures which will be dynamically rendered and whenever one Disclosure is opened the…
Jerome Marshall
- 323
- 1
- 4
- 14
7
votes
1 answer
Tailwind animation on display
I am trying to learn how to use animation with Tailwind. The animation that I am trying hopelessly to make is:
Entering: "duration-200 ease-out"
From: "opacity-0 scale-95"
To: "opacity-100 scale-100"
Leaving: "duration-100 ease-in"
From:…
Marc Rasmussen
- 19,771
- 79
- 203
- 364
6
votes
4 answers
No utility classes were detected in your source files ,double-check the `content`
I am trying to setup tailwind 3 , but i got the next warning .
No utility classes were detected in your source files. If this is unexpected, double-check the `content` option in your Tailwind CSS configuration.
this is my project structure
|_public…
Anas Hafidi
- 349
- 1
- 5
- 15
6
votes
3 answers
how to integrate tailwindui JS in rails app
i'm on rails 7 with esbuild. I'm using tailwindUI. It works properly when using only css components. When a component uses JS it does not work anymore. For example the dropdown menu is open by default and i can't close it. I added…
guy banlock
- 107
- 2
- 4
5
votes
2 answers
Changing Popover internal state - Headless UI
How do i change the internal state of the Popover with a function outside the component: Like the openPopover function i created below.
const openPopover = () => {
setPopoverOpen(true) // Example..
}
{({open}: {open: boolean}) => {
…
haveman
- 311
- 1
- 3
- 13
5
votes
1 answer
Can't make the headlessui dropdown to open on mouse hover and not on click
I build an app in React and I have this dropdown from Tailwind UI which is opened on click events and I want to make it open on mouse hover too.
5
votes
2 answers
How to add roboto font family in tailwind?
How to add roboto font family in tailwind and us it for label element?
user18206178
5
votes
2 answers
Tailwind fully compile css without stripping unused classes
I have a Laravel project with Tailwind and have Webpack configured:
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
require("tailwindcss"),
]);
And this is my Tailwind.config:
const…
user1469734
- 851
- 14
- 50
- 81
5
votes
2 answers
Rails 7 + ImportMaps/whatever + TailwindCSS + JS = Boggled
First, I'm much more of a Rails back end person. The JS world today scares me. I know this is a super basic question, but I've racked my brain for a solid couple days trying to figure, this out. I don't know why I can't put a CDN link somewhere in…
Kyle Carlson
- 7,967
- 5
- 35
- 43
5
votes
1 answer
How to Extend Tailwind Screen size?
I want to extend 540px and 1920px screen size in tailwind but 'xxs' didn't work.
**theme: {
extend:{
screens:{
'xxs':'540px',
'xxl':'1920px',
},
}
}**
