Beautiful UI components, crafted with Tailwind CSS. By the makers of Tailwind CSS.
Questions tagged [tailwind-ui]
249 questions
5
votes
4 answers
Tailwind bg opacity
I was curious about the CSS behind tailwinds bg opacity. I could only find 'opacity' in pure CSS but that affects everything rather than just the background. Could somebody please explain this?

r1a2k3i4b
- 157
- 4
- 6
4
votes
3 answers
Applying an effect to multiple pseudo classes at once in tailwind
I am looking for a good shorthand to apply the same effect to multiple pseudo classes in tailwind.
For example, I may want to apply a blue background to both :hover and :focus states on a div.
Currently I'd have to write the following:

PeteG
- 421
- 3
- 17
4
votes
3 answers
How to set input full width on mobile devices in tailwind?
I have a input element. It takes 50% of available parent width. Property w-6/12.
How to set width full for mobile devices?
Code is:
4
votes
2 answers
How to update my template in my nextjs app
im using tailwind css to build my nextjs app, so im copying this template from tailwind ui and it says for it to work properly i have to..
{/*
This example requires updating your template:
```

josedguti
- 41
- 1
- 4
4
votes
1 answer
How to autofocus a headlessUi (tailwind) select?
When I open one page I need to have the select already open. I use this tailwindcss select
I tried this
//Listbox.Button has a prop called autoFocus

Loudrous
- 1,039
- 10
- 29
4
votes
2 answers
Tailwind - Truncate Text in single line

Harsha M V
- 54,075
- 125
- 354
- 529
3
votes
1 answer
How can I update Tailwind without having to precompile assets every time? (Rails 7)
I'm using Rails 7 and Tailwind UI. Every time I add or change a tailwind class, I have to
rake assets:precompile
to make it show the new styles. Is there a way to make it compile without that in Rails 7?

userden
- 1,615
- 6
- 26
- 50
3
votes
2 answers
tailwindcss: animate-spin not showing up
I wanted to include a loading spinner from tailwind-css and according to tailwindcss documentation, this should be available with the className="animate-spin".
I'm using React18 created from Vite. I've also installed daisyui in addition to…

disposable-kiwi
- 55
- 1
- 4
3
votes
3 answers
Tailwind - keep header and left/right sidebar sticky on scroll
How do I keep my header, left/right sidebar sticky on scroll (on desktop, not mobile)?
It doesn't seem to be working with the fixed or sticky class, I've posted an example here: https://play.tailwindcss.com/Bj68nUJj1C.