Неизвестно в правиле @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-правило @tailwind в css-чекер

Ankush Chauhan 17.10.2021 16:19
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
11
1
12 107
5
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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: [],
}

Другие вопросы по теме