10,591 questions
0
votes
1
answer
43
views
delay applying styles in nextjs with tailwind
in the dev mode when adding new style line it doesnt show, i have to add a new line of style then the prev one works but the newest one doesnt work
or i have o comment a line
its like any new line of ...
- 149
-7
votes
1
answer
63
views
Grid and Grid items / Grid children behaviour [closed]
I have a grid container parent that has a grid item placed in a small leftover width on my page (i have a page layout with 75% and 25% width, I'm trying to add a tags list in my 25% side of the page).
...
Best practices
0
votes
0
replies
38
views
Next.js 16 + MUI 7.3.9 + Tailwind 4.2 Setup
How properly configure Next.js 16 + MUI 7.3.9 + Tailwind 4.2?
// layout.tsx:
import type { Metadata } from "next";
import { Bebas_Neue, Rubik_Mono_One, Ultra } from "next/font/google&...
- 99
Best practices
0
votes
1
replies
78
views
How does your project use design tokens?
Could you please explain how your project uses Design Tokens? How do designers generate Design Tokens, convert their format, and finally integrate them into your project?
I know what design tokens are....
- 1
-6
votes
2
answers
123
views
React App isn't showing components in localhost browser when I run 'Npm run dev'
I am following a tutorial from Youtube by building a React portfolio site. I set up using Vite. I have followed the steps exactly and checked the code. But when running npm run dev localhost my ...
1
vote
0
answers
53
views
How can I apply blur to a parent without the children getting blurred? [duplicate]
The background blurs as it should, but the child elements also get blurred and I have no idea what could be causing it or how to fix it.
Does anyone have experience with this or can you see what the ...
- 11
0
votes
0
answers
57
views
Issue with BlocksRenderer rendering rich text when using TailwindCSS
I'm having a problem using BlocksRenderer from @strapi/blocks-react-renderer. I've double-checked everything, and the data coming from the backend is correct. However, when I pass the rich text ...
- 88
-1
votes
1
answer
40
views
Tailwind CSS IntelliSense not working in Blazor Server (.NET 10) project in Rider
I’m working on a Blazor Server project targeting .NET 10 and trying to use Tailwind CSS.
I included the Tailwind CDN script in the <head> section of App.razor, and at runtime everything works ...
- 31
-1
votes
1
answer
92
views
Tailwind CSS v4 arbitrary value classes (brackets []) not rendering in Next.js 16 with Turbopack
I am using the latest Next.js 16.1.6 with Tailwind CSS v4.2.1 and React 19. When running the development server with Turbopack (next dev --turbo), arbitrary value classes like aspect-[12/5], z-[100], ...
1
vote
3
answers
88
views
pnpm reports incorrect peer dependency version warning when `vite` is aliased to `@voidzero-dev/vite-plus-core` by Vite+
I created a test Vite+ project. Then I tried to install the @tailwindcss/vite plugin using the vp install command, which supports many Vite versions, but I still ran into a warning. (Although it can ...
- 20k
Advice
1
vote
8
replies
98
views
Is SCSS still relevant alongside Tailwind CSS?
I recently started an internship where the team asked me to use SCSS. What caught my attention was that my mentor described the stack as:
SCSS (main styling)
Tailwind CSS (utility classes)
In ...
0
votes
1
answer
97
views
`prefix()` does not work for `tailwindcss/utilities.css` when preflight and theme are excluded
I am using TailwindCSS v4 in a widget that will be embedded into other websites. Because of this, I want to avoid global style conflicts, especially CSS normalization.
So instead of importing the full ...
- 290
0
votes
1
answer
76
views
How to use tailwind css classes inside WP page content?
I'm using Tailwind in a custom WP theme and ran into an issue with classes used inside the WP page editor. From my setup, I installed tailwind with Node.js and I build the CSS using "pnpm build&...
2
votes
1
answer
56
views
How to set a custom color for Nuxt UI UChip?
Given the Nuxt UI Chip component having a color property accepting fixed colors.
I'm calculating a heatmap color ranging from the Tailwind colors "bg-transparent" to "bg-emerald-900&...
1
vote
1
answer
75
views
New TailwindCSS v4 utilities are not working in v4.1, even though the documentation lists them
I tried the utilities available in the documentation, but in a few cases nothing appeared in the compiled CSS. I don't see the expected result in DevTools, as if they don't exist at all:
block-* ...
- 20k
0
votes
1
answer
74
views
How to handle @source for a React UI Library in production?
I am currently building a custom React UI library (monorepo structure) using Tailwind CSS v4.
During development with Storybook, my styles only render correctly if I explicitly point to the source ...
0
votes
1
answer
78
views
Tailwind index css styles override class styles [duplicate]
I would have an index.css file that would set some initial styles like:
h1, h2, h3, h4, h5, h6 { @apply text-gray-800 }
and in few instances would like to set
<h6 class="text-primary-500"...
- 29
5
votes
2
answers
128
views
How to make text and image columns have equal height
I have a container with a max-width and two elements side by side using flexbox:
a text block
an image
Both elements technically have the same height as flex items, but the image keeps empty space ...
- 41
1
vote
1
answer
121
views
Vite not building Tailwind v4 CSS
I have a Svelte project that for a long time I used Tailwind v3 for, that I'm using Vite to build and Vercel to deploy. Then at some point I upgraded a bunch of packages, including upgrading Tailwind ...
- 11
0
votes
1
answer
47
views
How can TailwindCSS be installed and used in Webpack without PostCSS?
I noticed that in TailwindCSS v4, PostCSS was removed, and under the hood everything is handled entirely by LightningCSS, so no extra PostCSS plugins are needed. Because of this, they were able to ...
- 20k
0
votes
3
answers
179
views
Error: Cannot find module '../lightningcss.win32-x64-msvc.node' with two different LightningCSS versions, TailwindCSS does not work
There have been several similar questions, but without a reproduction they did not get meaningful answers. In some questions, the question itself does not include a reproduction, but the answers are ...
- 20k
0
votes
1
answer
55
views
Tailwind CSS v4: tailwind.config.js styles not applying after upgrading from v3
I recently upgraded my project from Tailwind CSS v3 to v4 and am using Next.js 16.0.8 with tailwindcss ^4.0.0. In v3, I relied heavily on tailwind.config.js for custom colors, font sizes, spacing, and ...
1
vote
1
answer
234
views
Cannot build Vite + React frontend using TailwindCSS with PostCSS after reinstalling dependencies
I developed an app using Vite + React + TailwindCSS, and it was working fine. Recently, I removed node_modules to update everything and then ran:
npm install
npm run build
Now I get multiple errors ...
- 19
1
vote
1
answer
1k
views
Installing the TailwindCSS Vite plugin with Vite 8 - peer vite@"^5.2.0 || ^6 || ^7" from @tailwindcss/[email protected]
I'm following the Vite plugin documentation, but I'm running into an error because of the new Vite 8.
I'm creating a new project generated with the new 8.x version, then running it:
npm install ...
- 20k
0
votes
2
answers
73
views
Nuxt Fonts with TailwindCSS v4 not loaded if using `@theme inline` instead of `@theme`
I want to use Nuxt Fonts to ensure that the appropriate @font-face rules are generated for my fonts. The documentation claims that for v4 I don't need to use the processCSSVariables option and that I ...
- 20k
0
votes
1
answer
96
views
Nuxt Fonts does not generate the correct `@font-face` when the font is set as the default font in TailwindCSS v4
I'm using the @nuxt/fonts package to provide the font declarations. When the package detects a font name, it automatically adds the required @font-face rules to the compiled CSS. Based on the tests, ...
- 20k
2
votes
1
answer
112
views
TailwindCSS styles are not being applied in Storybook within a Turborepo
Problem:
I have a Turborepo with a /package that contains my React components (UI library). In the /apps folder, I have my Storybook setup. Storybook itself works correctly and loads the stories as ...
0
votes
1
answer
47
views
StencilJS is not capable of importing CSS files from dependencies via PostCSS
By using the @stencil-community/postcss package, I enabled embedding PostCSS plugins into my StencilJS project. However, in this case, @imports in CSS files that point to dependencies do not work. For ...
- 20k
0
votes
1
answer
46
views
StencilJS cannot find a valid PostCSS plugin
I’m passing a valid PostCSS plugin to StencilJS in the usual way via the PostCSS configuration, and I get an unexpected error message at runtime:
Build Error: @tailwindcss/postcss is not a PostCSS ...
- 20k
0
votes
2
answers
166
views
How to install and use TailwindCSS into StencilJS via PostCSS
StencilJS is a fairly mature framework, yet there is no clear installation guide for it in the TailwindCSS documentation. Likewise, StencilJS itself does not say much about the implementation of CSS ...
- 20k
1
vote
1
answer
97
views
Tailwind CSS variant class not overriding base styles in React component
I’m working on a React + TypeScript project using Tailwind CSS (with @layer components and @apply) and I’m facing an issue where a variant modifier class is not overriding styles as expected.
I have ...
2
votes
3
answers
118
views
Tailwind CSS generates incorrect compiled CSS for escaped characters of JavaScript strings
When passing a TailwindCSS class name as a string, I do not need to escape the backslash in order to include it as a string. Since TailwindCSS analyzes the source code directly, this also results in ...
- 20k
0
votes
2
answers
91
views
How can we deal with CSS Grid using tailwind CSS?
I need column structure as given below using tailwind CSS:-
I'm facing issue with third box and fourth box as below mentioned:
First and second boxs width should equal
Third box width should be ...
- 3,793
Advice
5
votes
2
replies
78
views
Preference between front-end frameworks?
What suggestions for a secondary front-end framework to Bootstrap could I potentially teach?
-2
votes
1
answer
172
views
Tailwind classes not applied to Svelte components
I have a project structure like this (some files omitted):
ui
├── lib
│ ├── assets
│ └── components
│ └── Button.svelte
├── routes
│ ├── +layout.svelte
│ ├── +page.svelte
│ └── layout....
- 201
0
votes
0
answers
113
views
Unable to customize styles in borders, colors, selected date, other month days when use inline datepicker
I'm trying to customize the Flowbite inline datepicker using Tailwind CSS in a pure HTML environment, but most of the styles I apply are not taking effect.
I'm unable to customize the following:
...
- 29
Tooling
6
votes
11
replies
6k
views
TailwindCSS for beginners
How is good is TailwindCSS for programmers in their early web development journey? Does the usage exclusively fall into the somewhat experienced programmers or newbies can and should try it out? Or ...
1
vote
1
answer
197
views
How to install the latest Tailwind (v4) in an Ionic/Angular project
We'd like to install the latest Tailwind (v4) into our Ionic/Angular project so we can use its utility-first approach.
I've tried the guides mentioned here:
Angular guide
Capawesome guide
Workaround ...
- 12.1k
Tooling
0
votes
1
replies
84
views
How can I set a variable primary color dynamically while using Tailwind colors in different shades?
Is it possible to write something like this:
<div classname="bg-primary-200"></div>
and then set the primary color to one of the colors from the Tailwind colors in my global CSS:...
- 126
0
votes
1
answer
79
views
Vertical alignment discrepancy between different views in a React sticky header layout
I am building a dashboard with React and Tailwind CSS. The layout consists of a sidebar and a main content area. Both the sidebar header and the main content header have a fixed height of h-28 to ...
1
vote
1
answer
117
views
html-validate class-pattern: How to allow Tailwind CSS syntax while enforcing kebab-case?
I'm using html-validate in my Hugo project with kebab-case enforcement, but Tailwind CSS classes are failing validation:
Failing classes:
h-[76px] (arbitrary values with brackets/backslashes)
top-1/...
- 23
2
votes
1
answer
60
views
CSS/Tailwind Scroll Snapping not working within scrollable flex container with sticky header
I have three expandable vertically stacked cards positioned in a flex layout below a fixed sticky header.
Requirements:
It would be nice to have scroll snap feature, so that scroll snaps to the top of ...
- 349
2
votes
1
answer
154
views
CSS Grid/Flex Layout: Expandable stacked cards that should have specific height below fixed header with scrollable table content
I have three vertically stacked cards positioned below a fixed header.
Requirements:
When collapsed, each card should take exactly one third of the visible area below the header.
When a card is ...
- 349
-2
votes
1
answer
113
views
Why Tailwind extension "Tailwind CSS IntelliSence" does not work in tailwind v4.1.18(React js vite) [closed]
"Recently, I started styling my website using Tailwind CSS. Since I wasn't familiar with most of the styles, I began using the 'Tailwind CSS IntelliSense' extension, which suggests styles in a ...
- 3
0
votes
2
answers
87
views
Card Issue maintaining height and width through Margin and Padding
I am working in react js with tailwind. I have a card with a bg-color. I assigns it a bg color right and I dont want to give it a specific height or width and wonna to handle it through margin and ...
4
votes
3
answers
151
views
Tailwind height from array not working in Next.js
I’m using Next.js with Tailwind CSS. I have an array of objects and I map over it to render sections. Each item has a height value that should control the Tailwind height class.
const segments = [
...
- 41
0
votes
0
answers
131
views
Node.js segmentation fault during vite build after adding Typst (@myriaddreamin/typst-ts-node-compiler) – works locally but build step fails
I’m running into a Node.js segmentation fault (SIGSEGV) during npm run build and I’m stuck. This only started happening after adding Typst-based PDF generation.
Environment
Framework: SvelteKit
Build ...
- 388
2
votes
1
answer
99
views
How to add an extra font to Tailwindcss? [duplicate]
I have been searching around from different sources (including tailwindcss.com), but I really can't manage to use my desired font in my new Rails 8 application. Here is what I did:
downloaded the ...
- 2,210
Advice
1
vote
0
replies
42
views
Android Media Player type slider in react
I would like to make a similar animated slider to the one seen here in the top example. I don't want it to be functional, just the animation. I've tried using tailwind's animate class but it just ...
- 7
0
votes
1
answer
81
views
How to add border radius to the div with gradient border and gradient background color [duplicate]
I'm trying to add border-radius to a container, which have gradient border and gradient background color. But the border-radius is not being applied. I've tried several methods.
Initially this:
<...
- 676