reactjs学习解决unknownatrule@tailwindcss问题

2023-02-12 18:00

短信预约 -IT技能 免费直播动态提醒

解决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，修改成如下内容：


module.exports = {
  content: [
    "./class="lazy" data-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;

根目录执行