292 questions
10
votes
1
answer
7k
views
How to define custom colors and use them in dark, light mode without using :dark?
I am using Tailwind CSS v4 and want to define custom colors that automatically switch between light and dark modes. Instead of using the dark: prefix for every class, I want to manage color changes ...
- 18.4k
14
votes
3
answers
22k
views
How to use custom color themes in TailwindCSS v4
My tailwind.config.js in v3 looks like this, but I can't find a way to use it in v4:
theme: {
extend: {
colors: {
lightHover: '#fcf4ff',
darkHover: '#2a004a',
darktheme: '#...
- 18.4k
3
votes
4
answers
3k
views
How `@variant dark` can be combined with `@theme` in a CSS-first configuration to override dark mode colors
TailwindCSS v4 has changed significantly the light/dark theme design due to the removal of tailwind.config.js file.
In TailwindCSS v3 this is how I changed the custom CSS properties depending on the ...
- 18.4k
0
votes
1
answer
1k
views
How can I implement the darkmode in my project?
I want to add the theme switch functionality on my website, I know that how can we configures the theme change/toggle functionality using previous tailwind versions. But it would be appreciated if ...
- 18.4k
9
votes
2
answers
14k
views
TailwindCSS v4 dark theme by class not working without dark tag
I'm trying to set up a custom theme in Tailwind CSS v4 that auto-switches to dark mode without adding the dark: prefix to every custom class.
In Tailwind v3, my setup was:
index.css:
:root {
--...
- 18.4k
-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": {
// ....
CommunityBot
- 1
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, ...
CommunityBot
- 1
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
15
votes
1
answer
31k
views
How to set Tailwind CSS v4 global class?
I started a new project using the latest Vite and Tailwind. In version 4.0, I couldn't find the tailwind.config.js file, which made me confused about how to configure global types.
Especially the ...
- 1,169
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 ...
- 39
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....
- 18.4k
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 ...
- 18.4k
0
votes
2
answers
2k
views
From v4 the reset style cannot be overridden by TailwindCSS classes
Padding is just a specific example. The focus is on setting a default configuration and then overriding it with TailwindCSS.
By default, I reset the padding of all elements to 0. After that, I expect ...
- 18.4k
1
vote
2
answers
505
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 ...
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 ...
- 87
-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
0
votes
1
answer
4k
views
How to use create React app with TailwindCSS v4
I tried to configure a new project using React, TypeScript and TailwindCSS v4 but Tailwind isn't applying.
Here is my installation:
npx create-react-app web
npm install --save-dev typescript @types/...
- 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
151
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 ...
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 ...
- 110k
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 ...
- 18.4k
25
votes
4
answers
67k
views
Cannot build frontend using Vite, TailwindCSS with PostCSS
10:04:32 PM [vite] Internal server error: [postcss] It looks like you're trying to use tailwindcss directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue ...
- 18.4k
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 ...
- 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=...
- 18.4k
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 ...
- 18.4k
22
votes
9
answers
29k
views
How to upgrade TailwindCSS?
I'm currently using Tailwind v3 in my Angular project (https://github.com/edissyum/opencapture/tree/dev_nch).
Today I tried to upgrade to Tailwind v4, but without success.
I didn't use PostCSS, I just ...
- 18.4k
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 ...
- 18.4k
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
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....
- 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 ...
- 18.4k
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-...
- 18.4k
4
votes
1
answer
8k
views
Tailwind 4 Utilities Failing ("Cannot apply unknown utility class") in Next.js 15 (Pages Router) Build
I'm setting up a new project using Next.js (v15.3.0 - Pages Router) and Tailwind CSS (v4.1.4) and I've hit a persistent build issue where Tailwind utility classes are not being recognized.
The Core ...
2
votes
1
answer
2k
views
Can't install TailwindCSS 4 standalone
Trying to install Tailwind 4.0 full standalone CLI following their own documentation here:
Standalone CLI: Use Tailwind CSS without Node.js - TailwindCSS Blog
I copy and paste the example for macOS ...
- 18.4k
0
votes
1
answer
3k
views
Unexpected token CloseSquareBracket error with TailwindCSS v4 and Parcel
I followed all the steps mentioned in the Tailwind v4 docs, to setup TailwindCSS v4 with parcel . After setup when i am running local server then i got this error.
Server running at http://localhost:...
- 18.4k
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
└── ...
- 18.4k
-3
votes
2
answers
2k
views
How to use/install tailwind css in nuxt 4?
I was trying to get tailwindcss to work in my nuxt 4 application. There is no proper documentation for the same. After wasting 4 hours of my life asking chat GPT which did not help I finally got the ...
- 140
16
votes
4
answers
35k
views
While installing tailwind CSS I am having this error 'npm error could not determine executable to run'
I am trying to install the tailwind in react project but while creating tailwind.config.js file I am having this issue.
This is the error I am facing
npx tailwindcss init -p
npm error could not ...
14
votes
14
answers
12k
views
VSCode Tailwind CSS Intellisense autocompletion and suggestions not working after installing Tailwind v4
I've intsalled Tailwind CSS v4 (released in Jan'25) in VSCode project (Vite):
npm install tailwindcss @tailwindcss/vite
Now the Tailwind CSS Intellisense extension in VSCode is not working. It is not ...
- 102
22
votes
7
answers
39k
views
Problem installing TailwindCSS after `npx tailwindcss init` command - tailwindcss not recognized - npm error could not determine executable to run
I've been using TailwindCSS for my projects for a long time, and I'm used to first installing the package and then creating the tailwind.config.js file using the init process. I did the same for ...
- 18.4k
2
votes
1
answer
6k
views
Internal server error: [postcss] It looks like you're trying to use tailwindcss directly as a PostCSS plugin
When I run this project using npm run dev, then my output errors:
[vite] Internal server error: Failed to load PostCSS config
Error: Cannot find module 'tailwindcss'
[vite] Internal server error: [...
- 18.4k
0
votes
2
answers
2k
views
I am trying to use vite with tailwind and I keep getting this error [duplicate]
I have been trying to install vite with tailwindcss, but I keep getting this error:
[vite] Internal server error: [postcss] It looks like you're trying to use tailwindcss directly as a PostCSS plugin....
- 18.4k
2
votes
2
answers
3k
views
How to make Angular 19+, PrimeNG 19+, and Tailwind 4+ work together?
How to make Angular 19+, PrimeNG 19+, and Tailwind 4+ work together?
My configuration:
package.json
{
"name": "web",
"version": "0.0.0",
"...
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
18
votes
4
answers
12k
views
How is it possible to specify a safelist in TailwindCSS v4? Is it possible to list patterns and variants instead of full class names?
How to make a safelist in TailwindCSS v4?
As of now tailwind v4 preferable configuration is to use CSS. Not a .config.js anymore. But even if I use the JS-based configuration, the safelist property is ...
- 18.4k
10
votes
1
answer
9k
views
How to use @keyframes in Tailwind CSS version 4?
I just started learning Tailwind and I watched a tutorial. At first, the command npx tailwindcss init, which creates a file tailwind.config.js, didn't work for me. Error: Invalid command: init. This ...
- 18.4k
0
votes
3
answers
1k
views
NextJS not applying tailwind 4.0
I'm curious when I create next-app with tailwind 4.0 but I choose to not put app folder inside of src, when I use tailwind property in any element it will not applying style text-red-400, text-white, ...
1
vote
1
answer
4k
views
How can implement darkmode in TailwindCSS v4 using Vite in React project?
How can implement dark mode in TailwindCSS v4 using Vite in React project? I did the below code but it didn't work?
vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-...
- 18.4k
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 ...
