Неизвестно в правиле @tailwind css (unknownAtRules)

Итак, я впервые использую Typescript и Tailwind. Я уже следовал руководству по попутному ветру для создания-реагирования-приложения, но когда я пытаюсь запустить npm start, я получаю эту ошибку:

./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>)

это мой index.css

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

body {...

Я получил предупреждение в index.css Unknown at rule @tailwind css(unknownAtRules)

а это мой 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();

🤔 А знаете ли вы, что...
С помощью CSS можно создавать адаптивные изображения, которые подстраиваются под размер экрана.


11
12 107
5

Ответы:

Решено

Это странно. Попробуйте обновить Node.js до последней стабильной версии и повторите попытку.


Обновите NodeJS с помощью nvm, следуя инструкциям по этой ссылке: https://learn.microsoft.com/en-us/windows/nodejs/setup-on-windows

Убедитесь, что вы удалили предыдущую папку node_modules из своего проекта.

Следуй этим шагам

Установить РимРаф:
npm install rimraf -g

И в папке проекта удалите папку node_modules с:
rimraf node_modules

Ссылка: Как удалить node_modules — глубоко вложенную папку в Windows


Добавлена ​​поддержка языка postcss для расширения VS Code.


Создайте или отредактируйте .vscode/settings.json и добавьте:

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

Кроме того, полезно расширение VSCode — эти заметки взяты из их документов.


Попробуйте добавить файл .postcssrc в корень вашего проекта с содержимым:

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

и tailwind.config.js с содержанием:

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