Questions tagged [tailwind-css]
Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.
tailwind-css
10,027
questions
0
votes
0
answers
8
views
How can I make TailwindCSS @apply rules work?
I am failing to get custom classes to work using @apply. I have followed the docs but it seems tailwind ignores some classes. Is there anything wrong with how I am doing it?
Here is my input file:
@...
- 1,164
1
vote
1
answer
37
views
Is there a way to programmatically change screen size for tailwind class
I am building UI-kit with react tailwind.
I know that tailwind can't find classes that made with template strings. I want to achieve this:
I have a few components in my ui kit and I want them to have ...
1
vote
0
answers
18
views
Two node_modules folders in a React and Tailwind project [closed]
I first installed React (with TypeScript) then added Tailwind to the project as it's documented on their website here and this resulted in two node_modules folders and two package.json files in the ...
- 69
0
votes
1
answer
10
views
NextJS in Chrome Extension - Link component breaks when running build code
I'm creating a NextJS application that uses TailwindCSS for theming and styles but I'm also using NextUI for a component library.
In my tailwind.config.ts file, I have defined some custom colors.
...
- 613
0
votes
0
answers
8
views
Tailwind CSS throws error: 'Module not found: Can't resolve './${generatedImage}''
I am using NextJS and Tailwind CSS. Previously, I had this code (note: generatedImage is a url of an image):
<div
ref={innerref}
className={`${
generatedImage ? `bg-[url(...
- 863
1
vote
1
answer
24
views
Tailwind: Why are all grid columns the same height?
I have a grid, with 4 columns, but its only a grid on lg screens.
I'm trying to understand why each column has a fixed height of the longest column?
Is there a way for other columns not to be ...
- 11
0
votes
1
answer
24
views
The .bg-* utility class of tailwindcss doesn't seem to work [duplicate]
I looked at the issues at GitHub and since it used to work in my project it's probably a configuration problem instead of a bug so I don't want to open a new issue.
I have a React project that uses ...
- 11
0
votes
0
answers
16
views
When I try to use material tailwind react, I am getting dispatcher is null error
When I am using tailwind in react it is working fine but when I am using material tailwind in react I am getting the error "dispatcher is null. When I am using tailwind in react it is working ...
0
votes
0
answers
26
views
TailwindCSS with Nuxt 3 application: how do I use custom class in the Nuxt 3 component with @apply?
Sometimes I get the error when using the custom TailwindCSS class with @apply in my Nuxt 3 component <styles>. The issue is during the build npm run generate or npm run build but most of the ...
- 3,310
-1
votes
0
answers
10
views
Style noUiSlider focus outline with tailwind
I'm using noUiSlider and tailwind and was able to style it in tailwind's input.css:
@layer components {
.noUi-tooltip {
@apply border-none outline-none
}
}
However, the tailwind class ...
1
vote
1
answer
31
views
How can I make Tailwind work on my component
Good morning everyone. I'm trying to render a FlashMessage component
<% flash.each do |type, message| %>
<%= render FlashMessageComponent.new(type: type, message: message) %&...
0
votes
1
answer
31
views
Tailwind safelist for dynamic custom classes
Basically, I'm using iconfiy with tailwind and addDynamicIconSelectors(), where you are supposed to add icon as classes like this 'className = 'icon-[icon-name]'', and I have a custom component that ...
0
votes
1
answer
36
views
Some Tailwind classes are not applied
I'm using Tailwind in a Vue3 project and I'm encountering weird behavior with some classes. For examle, I have this code :
<li class="border-solid border-l border-red-500">
In VScode,...
- 103
0
votes
1
answer
25
views
Tailwind break-words doesnt exist, how to solve?
I have the following case where I have a url in some div but the url breaks out of the div:
https://play.tailwindcss.com/hJOQaxaQxd
Ideally I could use word-break: break-word; but that doesnt exist. ...
- 5,624
-2
votes
0
answers
25
views
How to implement a line which guides users through a website [closed]
I'm trying to do the purple line which guides users through entire website and my stack is react, tailwindcss. I need it to be also responsive. How can I implement it? Also I need it to be aligned ...
- 21