1,093 questions
-1
votes
1
answer
84
views
Stylelint extension not validating Tailwind CSS @apply directives in VS Code [closed]
I am using Tailwind CSS with PostCSS and trying to configure the Stylelint VS Code extension to validate my CSS files.
Despite having stylelint-config-tailwindcss installed and configured, the linter ...
1
vote
1
answer
87
views
Is it possible to set up a gulp-based build to compile css modules for react components
I have an existing Express project where I'd like to add css modules locally scoped to my react components. The project relies on a gulp build script. I have recently added react to the project to ...
- 987
1
vote
1
answer
149
views
@layer base is used but no matching @tailwind base directive is present
I'm having issue with tailwindcss 4. On fresh new project when I run the app the error occurs:
C:/Users/Maxima/Desktop/System_obslugi_praktyk/src/app.css:45:1: @layer base is used but no matching @...
- 11
0
votes
0
answers
67
views
PostCSS parent Selector is adding :is() pseudo after compilation and not producing compatible css
I have just migrated from SCSS to PostCSS and encountered only one issue I cannot resolve.
The issue concerns how to alter a the styles of a nested element when its parent has a specific class.
The ...
- 20.6k
1
vote
0
answers
55
views
Bundle selected CSS files to a single output file
How to combine multiple CSS files into a single output file?
In SASS, this was done in a SCSS file by adding in other SCSS files via the @use method.
I have found that this can be done by adding in ...
- 20.6k
2
votes
1
answer
359
views
Tailwind CSS not applying in Turborepo monorepo with shared tailwind-config package and UI component library and storybook
Description
I have a Turborepo monorepo set up with the following structure:
root/
├── apps/
│ ├── web/ # Next.js app
│ │ ├── src/
│ │ ├── package.json
│ │ ├── tailwind....
- 45
1
vote
1
answer
189
views
How can I build TailwindCSS from an HTML string?
How can I build TailwindCSS from an HTML string? I tried:
import postcss from 'postcss'
import tailwindcss from '@tailwindcss/postcss'
export async function buildTailwind(content, css = '') {
const ...
- 25
1
vote
0
answers
82
views
Tailwind v4 variables are not working in prod build but working in dev
//postcss.config.js
module.exports = {
plugins: {
'@tailwindcss/postcss': {},
},
}
//webpack.mix.js
mix.js('resources/js/app.js', 'public/js')
.react()
.postCss('resources/css/app.css', '...
- 397
2
votes
2
answers
212
views
Why is @apply underlined in my Tailwind CSS input file in VS Code?
I'm learning Tailwind CSS for the first time and trying to set up a global custom class using @apply. Even though everything seems to be working fine, the @apply line is underlined in my CSS file in ...
- 61
1
vote
2
answers
332
views
`backgroundImage` in tailwind.config.js not working after upgrade to TailwindCSS v4
I need help find the cause to why backgroundImage stopped working after I had to upgrade to tailwind v4. I initially had one linear background set in the config which worked fine until I upgraded to ...
- 335
2
votes
0
answers
105
views
Next.JS incorrect css ordering breaks cascade layers
I have a Next.js application where I try to use css layers to control the precedence.
The css is a mix of global css and third-party libraries (e.g. Mantine UI). Therefore, I have the following line ...
- 1,185
0
votes
2
answers
426
views
React + Vite + TailwindCSS application is not building
I was working on migration my application from CRA to Vite.
Project is using React, Tailwind, SCSS, TS and Vite.
After migration application works well with all Tailwind styles locally. It is also ...
- 55
0
votes
2
answers
261
views
Why @tailwind utilities; stopped working all of sudden?
Environment:
Next.js 15 (App Router)
Tailwind CSS 3.4.10
PostCSS 8
Sass 1.87.0
pnpm
HeroUI v2.7.8 (using @heroui/react)
What I’m seeing:
When I run pnpm dev, I get:
Parsing css source code failed
./...
- 184
0
votes
2
answers
738
views
"Cannot read properties of undefined (reading 'input')" error
I'm encountering a build error when running a simple setup using Parcel, Tailwind CSS, and PostCSS. When I run npm run start, I get the following error:
> [email protected] start
> parcel
🚨 Build ...
- 487
2
votes
1
answer
325
views
Make TailwindCSS V4 not ignore CSS files
ENVIRONMENT
Next.JS 15.3.2
TailwindCSS ^4.1.6
PostCSS ^8.5.3
@tailwindcss/postcss ^4.1.6
DESCRIPTION
Recently all my projects were done using TailwindCSS together with .module.css. Despite official ...
- 561
1
vote
0
answers
60
views
I can't seem to get `postcss-purgecss` working
I've added @fullhuman/postcss-purgecss with yarn add @fullhuman/postcss-purgecss.
My configuration for postcss.config.js looks like this:
export default {
plugins: {
"postcss-flexbugs-fixes&...
- 4,646
-1
votes
1
answer
553
views
Tailwind CSS classes not applying in Next.js 14 App Router project
I am using a Next.js 14 project with the App Router (/app/layout.tsx) structure.
I installed Tailwind CSS correctly using the latest packages:
npm install -D tailwindcss postcss autoprefixer
npx ...
- 1
1
vote
1
answer
581
views
Tailwind@4 can no able in Storybook@8
I have created a new vue3 + Vite, Storybook project.
"@storybook/vue3": "^8.6.12",
"@storybook/vue3-vite": "^8.6.12",
"vite": "^6.2.0",
...
- 13
5
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
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
294
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
1k
views
Failed to load PostCSS config: module is not defined in ES module scope
I'm encountering an issue with my PostCSS configuration in my project. When I try to run my development server, I receive the following error message:
Failed to load PostCSS config: module is not ...
0
votes
0
answers
62
views
Tailwind 3 with Webpack 5 in React
I am having some configuration issues where I don't get any console errors but CSS processing seems to be conflicting on my app to the point where it is messing up with routing.
Every time I go to a ...
- 169
0
votes
0
answers
22
views
RollupJs, PostCSS, SCSS Modules, Bootstrap being created in Styles.css at end of file, overriding css
I am using Rollup, PostCSS, Bootstap, Sass and React to bundle a component that relies on Bootstrap css.
I write my component files but the output of Rollup has the following:
My Rollup Config is:
...
- 1,222
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....
0
votes
0
answers
43
views
PostCSS _fastglob.default.escapePath is not a function error when build TailwindCSS
I have a React.js TailwindCSS project with below package.json dependencies and devDependencies.
When I run the build script, I ended up with build errors where I tried all options to fix it but cant ...
- 411
2
votes
1
answer
1k
views
postcss-import: /node_modules/tailwindcss/lib/index.js:1:1: Unknown word "use strict"
I have created a project using Tanstack Start. I am using tailwind.css, shadcn-ui and some components from https://supercharged-shadcn-components.dykennethryan.com. Everything was going OK until I ...
- 8,078
0
votes
1
answer
640
views
Storybook installation guide is only available for TailwindCSS v3, how can I install it with TailwindCSS v4?
Navigating to the TailwindCSS installation section in the Storybook documentation quickly reveals that it only supports v3. There is no official installation guide for v4 yet.
Get started Storybook ...
- 18.8k
13
votes
2
answers
21k
views
How to fix Tailwind PostCSS plugin error?
Not one LLM was able to help me fix this issue, so here I am. I'm building a Vite + React + TS project and it fails to build because of this error: [plugin:vite:css] [postcss] It looks like you're ...
- 373
1
vote
0
answers
959
views
Fonts not applying in Next.js 15 with Tailwind CSS v4 after disabling Turbopack
I'm currently working on a Next.js 15 project using the App Router and Tailwind CSS v4.0. Initially, I had Turbopack enabled, and my globals.css looked like this:
@import url("https://fonts....
- 43
1
vote
1
answer
3k
views
How can I integrate TailwindCSS and PostCSS for React project in Vite?
When I try to run my react project, I get this error:
npm run dev
> [email protected] dev
> vite
failed to load config from E:\hp\Task\React-challenge\vite.config.js
error when starting ...
0
votes
0
answers
39
views
What can be used in place of compileType in the css-loader configuration for Webpack 5+?
I'm using Webpack 5+ and [email protected], postcss-loader @8.x but I've encountered an issue after upgrading. The compileType option, which was previously used in the css-loader configuration, is now ...
1
vote
1
answer
78
views
Invalid path setting in background image of tailwindcss with parcel
I am using parcel with tailwindcss for my project. I have installed parcel, tailwindcss, @tailwindcss/postcss according to the original docs in tailwind. My html tag looks like this:
<div class=&...
- 109
2
votes
2
answers
337
views
Error in Tailwind CSS Implementation inside React App
I installed the react app using npm's vite@latest command
npm create vite@latest my-portfolio -- --template react
Then I installed the tailwind css using below command inside my-portfolio/ directory
...
- 337
1
vote
1
answer
93
views
Hover is not applied in child element [closed]
I’m building a website with a dropdown menu for the "About Us" section, and I want the dropdown to appear on hover. However, the hover effect is not working. The dropdown does not appear ...
- 11
5
votes
1
answer
6k
views
Whenever I run my React-Vite it says [plugin:vite:esbuild] The service is no longer running
After running the npm run dev, it shows this:
[plugin:vite:esbuild] The service is no longer running
My config files are properly set up although I don't have a config file for PostCSS also.
vite....
- 51
3
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: [...
0
votes
2
answers
399
views
Laravel Mix keeps compiling every second without stop with Tailwind v4
This is my first time using Tailwind v4, and as I understand it the installation has been dramatically simplified.
My typical workflow is to use PostCSS and Tailwind with Laravel Mix to compile the ...
- 53
2
votes
0
answers
80
views
Styles not working when using SCSS Modules with Rollup
I am using rollup to build my package and scss modules for styling. For some reason, when I am importing the build to my next 14 project, the styles are not getting applied. I can see the class ...
- 1,005
1
vote
1
answer
121
views
backdrop-filter blur not rendering properly on Safari
When previewing my website in Safari (mobile and desktop) there are strange rendering issues with backdrop-filter: blur();. I am using PostCSS with the autoprefixer plugin so the code generates the ...
- 169
0
votes
0
answers
21
views
Extending default prettier printers [postcss]
What is the correct way of extending default printers with some extra logic?
My current approach is to write custom plugin which extends the current postcss printer, but it outputs error "...
- 602
25
votes
4
answers
69k
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 ...
- 343
0
votes
0
answers
90
views
How to install the “postcss-lit” plugin in Vite?
guys!
How to customize vite.config.ts to make vite.config.ts postcss-lit work?
My postcss syntax is not working for me. Specifically &
For example, &-container {//rules} will not work.
vite....
- 11
0
votes
1
answer
139
views
Why won't Hugo compile on my machine with PostCSS error, althogh it does on another PC with the same settings?
somehow I messed up my system, and can't figure out, what's wrong.
A few years ago I installed chocolatey, nodejs and Hugo on my PC (Win 10, now updated to Win 11). A few years later I downloaded ...
- 53
0
votes
1
answer
329
views
Normalizing CSS Globally
I am building a SSG website that is using SvelteKit (v2.0.0) and Svelte (v5.0.0). I am also using PostCSS using the vitePreprocess integration.
My project is the default SvelteKit project it generates ...
- 169
0
votes
0
answers
204
views
Problem with Tailwind CSS and PostCSS Configuration - Tailwind doesn't applied plugins
Problem Description
I added tailwind-animation and a custom plugin to the Tailwind CSS configuration, but the classes generated by the plugin are not visible in the CSS file. IntelliSence suggests ...
0
votes
0
answers
94
views
Tailwindcss beta 1 postcss gulp not working
I'm trying to construct the simplest possible Tailwindcss 4 Beta 1 postcss gulp pipeline. It runs with no error, but no css file is outputted to the dest directory.
My gulp.js file:
const
{ src, ...
0
votes
1
answer
404
views
from "postcss-is-pseudo-class" plugin: Complex selectors in '' can not be transformed to an equivalent selector without ':is()'
I am having django project with cookiecutter.
I have frontend pipeline setup with webpack, and using flowbite.
Everything worked well until I add a toggle button from the flowbite.
After I add this ...
- 67
7
votes
3
answers
40k
views
Integrating TailwindCSS v4 alpha with Vite and PostCSS config
So I've managed to get TailwindCSS v4 alpha working for starters. It uses the postcss.config.js file:
export default {
plugins: {
'@tailwindcss/postcss': {},
}
};
However I read that I should ...
- 1,680
1
vote
0
answers
211
views
Error importing Tailwind CSS: "Module parse error: Unexpected character '@' (1:0)"
I'm facing an issue when trying to use Tailwind CSS in my React (or Next.js, if applicable) project. The app loads and works for a few seconds, but then displays the following error in the console:
...
- 11