292 questions
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 ...
1
vote
1
answer
136
views
Is there a way to run Tailwind and DaisyUI in React-based chrome extension's content scripts?
I'm trying build a chrome extension using vite, react and tailwind. When I use DaisyUI inside of the popup it works just fine but when I try to add it to my content script, it just isn't showing up.
...
- 11
1
vote
2
answers
1k
views
Custom @font-face Font Ignored by Tailwind CSS v4 with Vite and React
I'm trying to use a custom font (RetroGaming.ttf) in my React project using Vite and Tailwind CSS v4, but the font isn't applying. The @font-face rule seems ignored, and the generated Tailwind class ...
- 574
0
votes
0
answers
186
views
Tailwind default styling not being applied when using a custom 'cn' util function with tailwind-merge and clsx
I am using Tailwind V4 and created a custom utility function:
import type { ClassValue } from 'clsx';
import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
export const cn = (......
- 4,888
2
votes
1
answer
942
views
PrimeNG 19 styles not being applied
I'm creating a new Angular 19 project using PrimeNG 19 and Tailwind CSS v4. I followed both the Tailwind and PrimeNG installation guides. However, when I run my application, the PrimeNG styles are not ...
- 77
0
votes
0
answers
64
views
npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch
When I add this comand
npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch
My vs code give this error .What should i do now?
const err = new Error(message);
^
Error: Cannot find module ...
1
vote
1
answer
2k
views
How to config Hero UI with TailwindCSS v4
Here are the details:
Next.js v15.x
TailwindCSS v4.x
Hero UI: latest
Tailwind classes work but Hero UI not showing styling at all.
package.json
{
"dependencies": {
"@heroui/...
- 77
0
votes
1
answer
1k
views
tailwindcss command not found after install (npm/yarn) on Windows [duplicate]
I'm encountering a persistent issue setting up Tailwind CSS v4 in a Vite + React project on Windows 10/11. The core problem is that the tailwindcss CLI command is unavailable after installation via ...
- 574
3
votes
1
answer
414
views
How to use theme configuration in newer css first approach of Tailwind
Starting from Tailwind v4 tailwind.config.ts is not supported/needed. Hence I am migrating v3 config of tailwind.config.ts. The below is existing code using tailwind.config.ts and I want to convert ...
- 1,370
0
votes
1
answer
42
views
@utility for creating to modify the repeat count of pre-declared animations
I wanted to declare a @utility called animate-repeat-{number}, whose function is to modify a variable at usage time; a variable I tie to the repeat count in all my animations. This works.
@utility ...
- 18.4k
1
vote
1
answer
464
views
how to define multiple custom animations with TailwindCSS v4
I am using TailwindCSS v4 with Next.js v15.0.4.
In globals.css I have:
@theme {
--animate-float: float 4s inifinite
--animate-wiggle: wiggle 1s infinite
@keyFrames[ wiggle {
0% {
...
1
vote
2
answers
224
views
TailwindCSS v4 generates bloated CSS with styles not used in the project
In my index.css I have these annotations:
@import "tailwindcss" prefix(tw) source(none);
@source "../content_script";
Generated CSS file has styles with names that are not under ...
- 971
2
votes
1
answer
2k
views
How to Configure Font Styles with @theme in Tailwind CSS v4
I used tailwind.config.js like this:
export default {
theme: {
extend: {
fontSize: {
'heading-banner-title': ['88px', { lineHeight: '100px', fontWeight: '700' }],
},
},
...
- 23
2
votes
1
answer
3k
views
TailwindCSS v4 does not generate certain styles when using prefix
I am using a prefix to distinguish my styling from 3rd party clases. When not using the prefix, this works fine:
fixed h-[5px] bg-green top-0 left-0 z-1000
When using the prefix top and left styles ...
- 971
-2
votes
2
answers
2k
views
TailwindCSS v4 not picking classes
I am doing work in a monorepo where I have 2 apps. The first is NextJS and the second one is React.js. I have recently upgraded Tailwind CSS version to the latest one. But the issue is that my CSS ...
- 11
0
votes
0
answers
290
views
Webpack Tailwind 4 only working partially
New to Webpack with Tailwind and trying to get it set up properly, but running into an issue I don't understand at all.
I've generated a new project with cookiecutter-django which uses Webpack. I then ...
- 262
3
votes
1
answer
2k
views
Why aren't my custom styles from tailwind.config.ts applied in a Next.js 15 project with tailwindcss 4.1.3?
I ran into an issue with a new Next.js 15 project.
I created it using and selected the option to set up Tailwind CSS 4.1.3. After the project was installed, I noticed that the file was missing. ...
- 49
5
votes
1
answer
4k
views
Electron-vite + React + Tailwindcss v4
Ive got tailwindcss v4 to work with other applications as a vite plugin in the vite.config.ts file.
Similar to this:
import { defineConfig } from "vite";
import tailwindcss from "@...
- 43
2
votes
2
answers
802
views
TailwindCSS v4 responsive and custom CSS not applied
I have app.css like this:
@import 'tailwindcss';
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php'; @source '../../storage/framework/views/*.php'; @source ...
- 23
2
votes
1
answer
2k
views
Adding Custom Font from local to Next.js 15 and Tailwind CSS 4
Hello I'm trying to add a local font that I've downloaded to my Next.js project but I'm having trouble loading it in my project.
./src/app/layout.tsx
import localFont from 'next/font/local'
const ...
- 23
-1
votes
1
answer
872
views
Tailwind CSS V4.1 having issue with VS code auto-complete suggestion for my Vite React project [duplicate]
As soon I installed the newer version of TailwindCSS V4.1 the autocomplete suggestion from Tailwind CSS IntelliSense donot work. So far I have tried the following troubleshooting methods:
Adding ...
0
votes
3
answers
3k
views
How can I add custom colors to my Tailwind project in the latest Next.js version using postcss.config.mjs?
I'm using the latest version of Next.js (with the App Router and TypeScript), and I noticed that my project uses a postcss.config.mjs file instead of the usual postcss.config.js.
I want to add custom ...
0
votes
2
answers
1k
views
How to configure Tailwind CLI in my project
I have been trying to add Tailwind to my project. I am using Tailwind CLI, it seems futile, kindly check what I have done wrong.
I followed the documentation:
Get started with Tailwind CSS and ...
0
votes
3
answers
683
views
Tailwind CSS v4 - Importing JSON colors into @theme variables
I'm migrating from Tailwind CSS v3 to v4, and I've hit a roadblock with custom colors. In v3, I was able to import a JSON file with color values directly into my tailwind.config.js:
const colors = ...
0
votes
1
answer
420
views
Unexpected ")" CSS syntax error when npm run build a TailwindCSS v4 project
The whole project was building without much problems but since one or two days (and most probably after composer & npm) update/upgrades) it will return the following:
npm run build
> build
>...
- 107
0
votes
2
answers
4k
views
TailwindCSS v4 with Sass not working in Webpack
Has anyone been able to successfully run TailwindCSS 4 with Sass in Webpack 5 & React app?
I am having some configuration issues where I don't get any console errors but CSS processing seems to be ...
- 169
0
votes
1
answer
286
views
tailwind.config.ts is not created by default; if create it manually, the styles still don't work
When I create Next.js project. Running:
npx create-next-app@latest
Then I choose all options and TailwindCSS as well. But after installation the tailwind.config.ts file is not created at all.
When I ...
1
vote
2
answers
145
views
Flyonui (Tailwindcss) collapse-open:rotate-180 not work
I have a problem with the Collapse component in FlyonUI. I'm using the following code:
<button type="button" class="collapse-toggle btn btn-primary" id="shadow-collapse&...
- 13
1
vote
1
answer
1k
views
TailwindCSS v4 does not apply styles in packages/components
Why does my tailwind not work with my components in my packages/components/src files?
It works in my apps/my-app but when I import my component from packages it does not apply TailwindCSS on my ...
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 ...
- 103
0
votes
1
answer
1k
views
How activate darkMode with TailwindCSS in Laravel 12
How add darkMode: class in tailwind.config.js, it is missing in Laravel 12.
- 13
2
votes
2
answers
822
views
Tailwind CLI does not generate CSS for all classes
I'm new to Tailwind CSS and I'm looking to include it in my Django/FastAPI project.
I'm using Tailwind v4.0.17.
The problem I'm having is that Tailwind doesn't recognize the HTML tags I have in my ...
- 43
1
vote
1
answer
811
views
How can generate separate CSS files for different sections in TailwindCSS v4 without using the content setting?
I'm using Tailwind CSS v4 and I'd like to generate separate compiled CSS files for different sections of my app (e.g. blog.css, dashboard.css), each one containing only the utility classes used in ...
- 185
2
votes
1
answer
213
views
tailwind v4 custom breakpoint was not successfully applied
I defined my own breakpoint use @theme:
@theme {
--breakpoint-tablet: 52.125rem;
--breakpoint-desktop: 90rem;
}
Then I defined my own class in @layer components:
@layer components
.mobile-...
1
vote
1
answer
180
views
CSS nesting with Vite 6.2.3 & TailwindCSS v4.0.16 only works on dev, not on build
I'm working with:
Vite v6.1
Tailwind v4.0.16
Whenever I run my dev server, the .container classes are generated and everything works fine. The moment I do a build, .container is not included in the ...
- 19
0
votes
2
answers
492
views
Error: could not determine executable to run when running npx tailwindcss init -p
How to solve the
Error: could not determine executable to run
error message when running:
npx tailwindcss init -p
My TailwindCSS version is the latest one, according to the log: [email protected].
...
0
votes
1
answer
1k
views
Cannot get custom themes to work in the updated shadcn ui (tailwindv4) [closed]
Wanted to try out the custom themes on the shadcn ui website, however when I paste the teams into my index.css (vite project) it does not get applied to my default components. Is there a step am ...
- 3
1
vote
1
answer
935
views
How to remove unused Tailwindcss v4 classes when building a library with Vite?
I'm building a Vue 3 component library using Vite and Tailwind CSS, but I want to ensure that the final build only includes the Tailwind classes that are actually used in my components.
Right now, the ...
0
votes
1
answer
237
views
I installed tailwindcss and tried to start dev server but it gives me an error instead on react
When I want to start my dev server the terminal gives me this error instead:
failed to load config from E:\Code\tailtests\vite.config.ts
error when starting dev server:
Error: Cannot find module '../...
1
vote
1
answer
288
views
Astro configuration with vite on the env
I'm working through a course and need help adapting the following code for my Astro project configuration.
The original code I'm trying to replicate is:
// @ts-check
import { defineConfig, envField } ...
- 11
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....
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-...
- 11
0
votes
1
answer
45
views
How to log theme values in a Next.js app using TailwindCSS 4?
When using TailwindCSS 3 in a Next.js app you could console log the theme in layout.tsx when you were implementing a tailwind.config.ts:
import resolveConfig from 'tailwindcss/resolveConfig';
import ...
- 9,086
1
vote
1
answer
3k
views
Adding custom variants to TailwindCSS 4
So the time has come to update my boilerplate to Tailwind 4, and I can't work out how to transfer my custom variant setup. In my Tailwind 3 tailwind.config.js I have this:
plugins: [
plugin(...
- 818
0
votes
2
answers
30
views
How can the listing of many repetitive identical height and width class names be shortened?
<Image
src={"/insta.png"}
alt="Instagram"
width={24} height={24}
className="
cursor-pointer
2xl:h-8 2xl:w-8 md:h-6 md:w-6 sm:h-4 sm:w-4
"
/>
...
1
vote
2
answers
4k
views
How to configure Tailwind CSS v4 in an ASP.NET Core MVC project?
I'm working on setting up Tailwind CSS in an ASP.NET Core MVC project, and previously, with Tailwind v3, the process involved initializing a tailwind.config.js file and specifying the CSS output ...
- 1
2
votes
1
answer
822
views
DaisyUI themes are not working for Vite + React project
I've created a project using Vite + React, also installed latest version of TailwindCSS. But daisyui is not working, even if I apply themes it is not working.
output image is attached, whereas having ...
0
votes
1
answer
692
views
How to Prevent Tailwind CSS Styles from Overriding Host Page Styles and Vice Versa in a Vite + React Widget?
I’m working on a project using Vite and React to build a widget that users can integrate into their websites. I’m using Tailwind CSS for styling and injecting the styles into the DOM using the vite-...
1
vote
1
answer
341
views
Tailwindcss V4 How To Override Only Margin
According to v4 docs, to override existing or define new spacing (which includes margin, padding, min-w/h, etc.) you use theme namespace:
--spacing-*
So let's say I would like to define mx-max to ...
- 81
1
vote
2
answers
55
views
How to apply linear-gradient 'to left' in tailwind?
I have achieved the following with
[mask-image:linear-gradient(to_right,transparent_0%,#000_1%)]:
But I have no idea how to do the same for the right side. I have tried many different things but no ...
- 928