Unknown at rule @tailwind css(unknownAtRules)

Question

So this is my first time using Typescript and Tailwind. I already followed tailwind guide for create-react-app but when I try to run npm start I got this error:

./src/index.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!./node_modules/postcss-loader/src??postcss!./src/index.css)
TypeError: Object.entries(...).flatMap is not a function
    at Array.forEach (<anonymous>)

this is my index.css

@tailwind base;
@tailwind components; 
@tailwind utilities;

body {...

I got warning in index.css Unknown at rule @tailwind css(unknownAtRules)

and this is my index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <div className="px-4 py-2 bg-green-500 text-white font-semibold rounded-lg hover:bg-green-700">tombol</div>
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

Does this answer your question? [How to add a @tailwind CSS rule to css checker](https://stackoverflow.com/questions/47607602/how-to-add-a-tailwind-css-rule-to-css-checker) — Ankush Chauhan, Oct 17 '21 at 14:19

Or Assayag · Accepted Answer · 2021-04-10T07:57:41.887

10

This is strange. Try to update your Node.js to the latest current stable version and try again.

edited Apr 10 '21 at 07:57

answered Dec 13 '20 at 21:17

Or Assayag

5,662
13
57
93

score 10 · Answer 2 · answered Jan 28 '23 at 17:56

10

Create or edit .vscode/settings.json and add:

{
  "files.associations": {
    "*.css": "tailwindcss"
  }
}

Additionally the VSCode extension is helpful - these notes are from their docs.

answered Jan 28 '23 at 17:56

cyberwombat

38,105
35
175
251

This the answer that worked best for me. The "PostCSS Language Support" extension also fixes it, but is slow and breaks another CSS extension I use regularly (Color Info). And I just use a different PostCSS extension for Intellisense. – timmywil Jul 15 '23 at 00:45

Joshua Poddoku · Answer 3 · 2020-12-30T22:34:56.807

Update NodeJS using nvm by following the steps from this link: https://learn.microsoft.com/en-us/windows/nodejs/setup-on-windows

Make sure you have uninstalled the previous node_modules folder from your project.

Follow these steps

Install RimRaf:
npm install rimraf -g

And in the project folder delete the node_modules folder with:
rimraf node_modules

Reference: How to Delete node_modules - Deep Nested Folder in Windows

score 3 · Answer 4 · answered Jan 15 '23 at 08:01

3

Add VS Code extension postcss language support

answered Jan 15 '23 at 08:01

Ngodza

387
3
8

score 0 · Answer 5 · answered Mar 20 '23 at 12:54

Try to add file .postcssrc into root of your project with content:

{
  "plugins": {
    "tailwindcss": {}
  }
}

and tailwind.config.js with content:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Unknown at rule @tailwind css(unknownAtRules)

5 Answers5