亲宝软件园·资讯

展开

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

漫漫想想 人气:0

解决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安装tailwindcsspostcssautoprefixer

npm install -D tailwindcss postcss autoprefixer

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

npx tailwindcss init -p

在完成第三步后,项目根目录下会出现两个配置文件分别是: postcss.config.jstailwindcss.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;

根目录执行

npm start

如果一切正常,那么页面应该展示如下:

在这里插入图片描述

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持。

加载全部内容

相关教程
猜你喜欢
用户评论