reactjs学习解决unknown at rule @tailwind css问题

漫漫想想 2023-03-20 我要评论

解决unknown at rule @tailwind css

安装tailwind，以及配置了tailwind css intellisense也无法解决在global.css中报错unknown at rule @tailwind css

这个问题在tailwindcss的官网也有描述

Tailwind CSS uses a lot of custom CSS at-rules like @tailwind, @apply, and @screen, and in many editors this can trigger warnings or errors where these rules aren’t recognized.

这个问题对于正常开发没有什么问题，但是为了使编译器兼容，避免报错可以配置一个PostCSS Language Support插件，使得编译器可以识别tailwindcss直接在css使用@语法报错以及module下报错。

React配置Tailwindcss问题

最近在react上配置tailwindcss时出现了一些问题，按照官网给出的文档配置完成后没有报错但css效果无法显示，在此记录最终解决方案。

步骤

1.首先利用npx建立react项目

npx creat-react-app my_app
cd my_app

2.利用npm安装tailwindcss，postcss，autoprefixer

npm install -D tailwindcss postcss autoprefixer

3.创建tailwindcss以及postcss的配置文件

npx tailwindcss init -p

在完成第三步后，项目根目录下会出现两个配置文件分别是: postcss.config.js，tailwindcss.config.js

4.打开tailwindcss.config.js，修改成如下内容：

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

5.打开index.css，并替换成如下内容

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

完成以上五个步骤后，tailwindcss就配置完成了，下面进行简单测试。

测试

打开App.js，将里面的内容替换成如下代码：

import './App.css';

function App() {
  return (
    <div className="container mx-auto bg-gray-200 rounded-xl shadow border p-8 m-10">
      <p className="text-3xl text-gray-700 font-bold mb-5">
        Welcome!
      </p>
      <p className="text-gray-500 text-lg">
        Hello React and tailwindcss
      </p>
    </div>
  );
}
export default App;

根目录执行