292 questions
0
votes
1
answer
59
views
Manual dark mode toggle, but by default it should follow the system scheme
So the documentation suggests that if I want a manual toggle, I should write it like this:
If you want your dark theme to be driven by a CSS selector instead of the prefers-color-scheme media query, ...
- 18.4k
1
vote
2
answers
53
views
OKLCH colors are converted to LAB colors when I start using Rolldown-Vite instead of Vite
There is a Vite project using TailwindCSS v4. v4 already targets Baseline 2023 and correctly uses oklch() colors.
Input CSS
@theme {
--color-demo: oklch(98% 0.006 251deg);
}
Generated CSS with Vite ...
- 18.4k
0
votes
1
answer
26
views
Disable automatic source detection when use `@tailwind utilities`
With shorthand import, this is easy:
@import "tailwindcss" source(none);
Although the documentation addresses what happens if I don't use @import "tailwindcss";:
https://...
- 18.4k
0
votes
2
answers
55
views
Tailwind dark mode classes not working even though .dark class is applied [duplicate]
I'm trying to implement dark mode in my Next.js app using TailwindCSS. However, TailwindCSS's dark: classes are not being applied, even when the .dark class is present on the <html> tag.
global....
-1
votes
1
answer
67
views
Tailwind css migration error: "Cannot apply unknown utility class" [closed]
I have a fairly large svelte kit tailwind project.
I updated all dependencies to latest, including TailwindCSS. My current dependencies are as follows:
{
"devDependencies": {
// ....
- 1,169
2
votes
1
answer
60
views
DaisyUI Navbar is generating scrollbar on fullpage site
I'm using Vite v7.2.4, Tailwind v4.1.17 with DaisyUI v5.5.5. I'm trying to create a full page website where the Navbar will be always visible and the section will change. But every time I add a Navbar ...
- 23
1
vote
1
answer
88
views
Tailwind CSS directives (@tailwind base) underlined as unknown in VS Code with Next.js project
I'm working on a Next.js 16 project and trying to set up Tailwind CSS v4. I installed Tailwind via npm:
npm install -D tailwindcss postcss autoprefixer
I also created the following config files ...
-3
votes
1
answer
77
views
Shipping a UI package alongside projects in a monorepo
Given a monorepo containing N projects, I wanted to avoid duplicating components, so I thought of creating a dependency package that only ships the components.
However, if I install TailwindCSS in ...
- 18.4k
2
votes
1
answer
126
views
Tailwind CSS v4 Vite plugin through npm:vite Can't resolve 'tailwindcss' error
I have trouble on implementing TailwindCSS v4 on Deno. This is my structure:
deno.json
{
"tasks": {
"dev": "deno run -A --watch main.ts",
"vite": &...
- 55
-5
votes
0
answers
150
views
shadcn/ui - How to switch color theme?
I installed shadcn/ui to my Next.js project with the "neutral" theme selected. Now I want to switch it to the "slate" theme for my entire project. What should I do? Do I just copy ...
0
votes
1
answer
113
views
Using TailwindCSS v4 in Bun SSR - how can I integrate it?
The TailwindCSS website currently doesn't have any guidance related to Bun, so it's difficult for me to figure out how to properly integrate v4 with Bun SSR. I found a bun-plugin-tailwind dependency ...
1
vote
1
answer
96
views
How to define variables with the new version of Nativewind v4?
I've a problem with the Nativewind variables. I created my project on the new version of expo (sdk 54) and therefore nativewind v4 but there is no more file tailwind.config.js to put variables, only ...
0
votes
1
answer
26
views
The `max-w-prose` utility works with the value 65ch, but it’s not documented and cannot be disabled even with `--spacing-prose: initial;`
I have a project where I'm trying to remove the previously used @tailwindcss/typography plugin.
I assumed that the max-w-prose utility was tied to the prose utility from that plugin, but after ...
- 18.4k
0
votes
1
answer
69
views
React TailwindCSS only rendering in mobile view in production
I have created a site using React with TailwindCSS v4.1.16.
When running the site in dev mode (npm run dev), the responsive design is working and I can see the changing formats when I resize my screen ...
- 1
1
vote
1
answer
91
views
Why I Cannot apply unknown utility class `border-border`? CssSyntaxError: tailwindcss [duplicate]
This is my global.css
@import "tailwindcss";
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
--card: 0 0% 100%;
--card-foreground: 222.2 84% 4....
- 2,886
1
vote
2
answers
127
views
How to define custom Tailwind variants for media breakpoints?
I am working on migrating a code base from Styled Components to Tailwind v4.
To avoid introducing breaking changes to our design, I want to continue using the same media breakpoints and media queries, ...
- 22.3k
3
votes
2
answers
241
views
Radix UI's global CSS cannot be overridden with TailwindCSS utilities - only with !important
I'm using ShadCN UI, Radix UI with TailwindCSS v4. I noticed that Tailwind classes don't work unless I add !important. For example:
<section className="bg-gray-100 !px-15 !pt-15 !pb-20 rounded-...
- 118
1
vote
1
answer
142
views
All components from the UI package are included in the project's generated CSS, but I don't use every component
I'm creating a "component" package that uses Tailwind utilities. For example, inside the package, I declare components like Button (./components/Button.tsx) and Input (./components/Input.tsx)...
- 18.4k
0
votes
1
answer
159
views
How to properly configure Tailwind v4 with @tailwindcss/vite in a monorepo for shared UI components?
I'm working on a Vue 3 monorepo with the following structure:
packages/
└── ui/
├── src/
│ ├── components/
│ │ └── *.vue
│ └── assets/
│ └── tailwind.css
└── ...
- 397
0
votes
1
answer
256
views
"`@source` paths must be quoted" is the error message I get when I try to use `@source inline` safelist
I'm using TailwindCSS v4.0.x, and @source inline safelist doesn't work with either the CLI, PostCSS, or even the Vite plugin:
https://tailwindcss.com/docs/detecting-classes-in-source-files#...
- 18.4k
0
votes
1
answer
62
views
How to make `@import`-like package references with `@source` for UI package
From TailwindCSS v4, you can manually control automatic source detection using @source. If I now want to map the internal files of a custom UI package so that they are included in the generated CSS, I ...
- 18.4k
1
vote
1
answer
214
views
How do you reference dynamic classes/utilities using a JS variable and pass them through in the class attribute inline in HTML?
I'm looking for a canonical answer for Tailwind CSS v3 with the finalized JIT engine, which can no longer be modified in v4. I'd like to reference colors using a CSS variable and use a syntax like ...
- 18.4k
1
vote
1
answer
170
views
Dark/light mode transition causes custom text colors to flicker after transition ends
I’m building a personal blog with Astro + Tailwind CSS and I successfully implemented a dark/light theme toggle.
After that, I wanted to add smooth transition animations between themes. To avoid ...
- 13
4
votes
3
answers
691
views
`@apply` is not working and does not validate actual TailwindCSS v4 class/utility names in an Angular (with Sass) project
I've recently created a new Angular application (v20.3.0) and I installed TailwindCSS v4, using the Angular documentation guideline which is very simple to do (also TailwindCSS in its documentation ...
- 127
1
vote
1
answer
65
views
Placing text over a div with a set opacity background with Tailwind
I have a div with a background image and it's opacity is set to 40%. This is TailwindCSS v4.
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<div class="...
- 63
3
votes
2
answers
243
views
How to create a clean continuous grid border effect with gaps?
I’m trying to build a grid layout with Tailwind CSS (v4.1) where:
There is a gap between items (e.g., gap-10)
But the border linesshould continue across the entire container(like graph paper)
The ...
- 425
3
votes
1
answer
245
views
Tailwind @container query behavior
I have a local setup of Tailwind v4.1 the below header occupies the whole screen on mobile viewports, with container queries
<div id="app" class="@container">
<div ...
- 304
4
votes
4
answers
183
views
How to make a pseudo-element span full width of grid container but align with specific grid item in Tailwind CSS?
I’m working on a grid layout using Tailwind CSS (v4.1).
Visit this play snippet
https://play.tailwindcss.com/cAvvS656Ts
Here’s a minimal example:
<script src="https://unpkg.com/@tailwindcss/browser@...
- 425
3
votes
1
answer
226
views
Angular not detecting `@use "tailwindcss";` and other changes in `.scss` files
I'm using Angular v20 and Tailwind CSS v4. I have everything set up as per the documentation.
Tailwind works great — for instance, if I define an element's class with a Tailwind utility class, the ...
- 1,145
2
votes
1
answer
103
views
How to convert a Tailwind V3 custom variant with group-* to V4?
In my tailwind V3 config, I have this:
const matchGroup = (groupName, selector, matchVariant) => {
matchVariant(
groupName,
(_value, { modifier }) => {
if (modifier) {
...
- 2,065
0
votes
2
answers
162
views
Tailwind functional utilities
In addition to registering simple utilities with the @utility directive, you can also register functional utilities that accept an argument:
CSS
@utility tab-* {
tab-size: --value(--tab-size-*);
}
...
0
votes
0
answers
25
views
Not able to get the tailwind classes suggestions in with tailwind v4 as there is not config file
I have just setup the next js project with typescript and tailwind. i wanted to apply the theme and got to know that, now on words tailwind v4, we will not have tailwind.config.ts file.
**but ...
2
votes
1
answer
123
views
How to apply different nth-child styles in Tailwind CSS v4.1 at different breakpoints?
I’m working on a responsive grid layout using Tailwind CSS and want to style grid items differently based on the screen size.
Here’s a simplified example of my code:
<html lang="en">
<head&...
- 425
1
vote
2
answers
504
views
TailwindCSS v4 utilities are too weak to override the styling of Ant Design v5 components
In TailwindCSS v3, the overrides still worked well, but from TailwindCSS v4 onward, it simply doesn't work, and Ant Design v5 always ends up being stronger. It seems this has to do with layers. How ...
- 18.4k
0
votes
0
answers
64
views
Global.CSS issue with TailwindCSS and PostCSS in Turborepo Monorepo
I am new to setting up a monorepo solution as I've only worked with a regular next app in the past. For my current project, I have 2 deliverables and I am trying to share resources and components ...
- 4,066
2
votes
1
answer
146
views
How to enable globally smooth color transition for dark mode toggle in Tailwind CSS v4.1?
I’m building a simple dark mode toggle using Tailwind CSS v4.1.
The dark mode switching itself works fine, but the transition effect doesn’t apply — the colors switch instantly instead of fading ...
- 425
2
votes
1
answer
219
views
How to use custom Tailwind spacing variables with calc() in utility classes?
I'm trying to use custom spacing variables from my Tailwind theme inside a calc() expression, but it doesn’t seem to work.
In my input.css, I added custom spacing like this:
@theme {
--spacing-my-...
- 425
1
vote
1
answer
71
views
Two columns of unequal height how to make the shorter column sticky at its end
I have two columns, one with infinite scroll and one with a variable height. Both columns are taller than the screen. Like this:
|-----------|-------| <- screen starts here
| col 1 | col 2 |
| ...
- 55
1
vote
1
answer
210
views
How do you overwrite DaisyUI component's style in a CSS file
I would like to overwrite some of DaisyUI components using CSS. For example, I would like to overwrite the .input font-size. Inside my components.css file I put the CSS styles but they are add first ...
- 275
2
votes
1
answer
385
views
How to use nested CSS classes in Tailwind CSS v4.1 with CLI compiler (no tailwind.config.js support)
I'm using Tailwind CSS v4.1 with the Tailwind CLI compiler (no tailwind.config.js support in this version). I want to understand the proper way to write nested classes (similar to SCSS nesting or @...
- 425
1
vote
1
answer
442
views
`@import "tailwindcss";` does not work when used in a file with an `.scss` extension
I wanted to use Tailwind and SCSS on my Nuxt site, but I noticed that the only way to make it work is if the file where I put @import is a CSS file; it doesn't work in an SCSS file.
I don't understand ...
0
votes
1
answer
104
views
Tailwind layer classes added twice
After updating from Tailwind v3 to v4, some Tailwind layer classes are added twice causing unwanted overrides, for example when I inspect element's computed styles in Chrome:
The redundant .text-...
- 4,609
0
votes
1
answer
293
views
How to package a standalone Tailwind v4 component (with tsup) without conflicting with host app styles?
I’m creating a reusable component library with tsup to share common UI elements across my Next.js projects (for example, a Footer).
The Footer works fine in my base app. But when I publish it as an ...
1
vote
2
answers
218
views
TailwindCSS v4 styles not showing after Vite/Astro build on Vercel deploy
I am trying to deploy an Astro.js site on Vercel that utilizes TailwindCSS v4:
tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
purge: ["./src/pages/**/*.{js,ts,...
- 23
0
votes
1
answer
74
views
Applying a CSS selector to detect the last theme declaration - disable dark theme in specified element
In a TailwindCSS variant - purely out of curiosity, since its usefulness is limited - I want to declare a dark: variant that works inside .dark, but gets overridden when inside a .light parent, and ...
- 18.4k
3
votes
2
answers
3k
views
How to use @apply in Tailwind v4?
Since Tailwind v4 update, all @apply directives have ceased to function.
The docs provide a workaround with @reference but the posted example is vague.
I tried this but it doesn't work:
<style lang=...
- 4,609
0
votes
1
answer
40
views
How can I reference `@theme` values without using variables, by reusing the value statically?
If I reference variables in CSS in a nested way using the var() CSS function, it cannot properly track changes to the original variable. Is there a way in TailwindCSS to reference a value declared in @...
- 18.4k
1
vote
1
answer
157
views
TailwindCSS custom color not working in Next.js
I've copied directly from the document, but the color is still not showing up. I'm using Tailwind v4 with Next.js.
In my global.css:
@import "tailwindcss";
@theme {
--color-bermuda: #...
3
votes
1
answer
340
views
How can I safely introduce the use of `light-dark()` without increasing the minimum browser version requirement?
Using light-dark() would be appealing to me, but it is part of the 2024 baseline and somewhat raises the minimum browser version requirement set by TailwindCSS v4 - which is already high - originally ...
- 18.4k
0
votes
1
answer
95
views
Custom color (bg-primary) is not being applied
I’m using Nuxt 4 (RC) with Tailwind CSS. Tailwind is working fine for default utilities (bg-red-500, text-xl, etc.), but my custom bg-primary color isn’t applied.
Here’s my setup:
nuxt.config.ts
...
- 11