CODEWITHSUNDEEP
cssreactjstypescripttailwind-css
Ihsan Fajar Ramadhan
Ihsan Fajar Ramadhan

Reputation: 1043

Unknown at rule @tailwind css(unknownAtRules)

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();

Upvotes: 27

Views: 37073

Answers (6)

Siddharth
Siddharth

Reputation: 29

If you are using Next.js and VS Code, the following might work for you:

  1. Check import "@/styles/globals.css"; in your layout.jsx file i.e. check if you have imported your css file correctly.

  2. Create .vscode folder at root level.

  3. In .vscode folder create two files: settings.json and tailwind.json.

  4. Copy and paste following into settings.json file:

    { "css.customData": [".vscode/tailwind.json"] }

  5. Copy and paste following into tailwind.json:

{
  "version": 1.1,
  "atDirectives": [
    {
      "name": "@tailwind",
      "description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.",
      "references": [
        {
          "name": "Tailwind Documentation",
          "url": "https://tailwindcss.com/docs/functions-and-directives#tailwind"
        }
      ]
    },
    {
      "name": "@apply",
      "description": "Use the `@apply` directive to inline any existing utility classes into your own custom CSS. This is useful when you find a common utility pattern in your HTML that you’d like to extract to a new component.",
      "references": [
        {
          "name": "Tailwind Documentation",
          "url": "https://tailwindcss.com/docs/functions-and-directives#apply"
        }
      ]
    },
    {
      "name": "@responsive",
      "description": "You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\n```css\n@responsive {\n  .alert {\n    background-color: #E53E3E;\n  }\n}\n```\n",
      "references": [
        {
          "name": "Tailwind Documentation",
          "url": "https://tailwindcss.com/docs/functions-and-directives#responsive"
        }
      ]
    },
    {
      "name": "@screen",
      "description": "The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\n```css\n@screen sm {\n  /* ... */\n}\n```\n…gets transformed into this:\n```css\n@media (min-width: 640px) {\n  /* ... */\n}\n```\n",
      "references": [
        {
          "name": "Tailwind Documentation",
          "url": "https://tailwindcss.com/docs/functions-and-directives#screen"
        }
      ]
    },
    {
      "name": "@variants",
      "description": "Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\n```css\n@variants hover, focus {\n   .btn-brand {\n    background-color: #3182CE;\n  }\n}\n```\n",
      "references": [
        {
          "name": "Tailwind Documentation",
          "url": "https://tailwindcss.com/docs/functions-and-directives#variants"
        }
      ]
    }
  ]
}
  1. If this doesn't solve the problem, try upgrading Node.js to the latest version. You can learn about it from GeeksforGeeks or from any other source you prefer.

Upvotes: 2

Valeriy
Valeriy

Reputation: 1445

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: [],
}

Upvotes: 1

cyberwombat
cyberwombat

Reputation: 40134

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

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

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

Upvotes: 48

Ngodza
Ngodza

Reputation: 467

Add VS Code extension postcss language support

enter image description here

Upvotes: 11

Or Assayag
Or Assayag

Reputation: 6346

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

Upvotes: 11

Joshua Poddoku
Joshua Poddoku

Reputation: 119

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

Upvotes: 4

Related Questions