reactjs学习解决unknown at rule @tailwind css问题
解决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;
根目录执行
npm start
如果一切正常，那么页面应该展示如下：
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家介绍了阿里低代码框架lowcode-engine自定义设置器示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
这篇文章主要介绍了react build 后打包发布总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
这篇文章主要为大家介绍了React Context源码实现原理示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
这篇文章主要介绍了react-router-dom 嵌套路由的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-05-05
在React中,编写样式主要有以下几种方式,内联样式,外部样式表,CSS Modules,Styled Components,Emotion和Radium这六种样式,下面我将针对上面提到的6种方式给出详细的代码示例,需要的朋友可以参考下2024-01-01
React函数组件通过接受props实现组件间的数据传递,通过组件标签的属性向子组件传递数据,并在子组件中通过参数接收,还可以使用ES6的解构赋值,函数也能作为props传递,以实现父子组件间的交互和通信,下面就来具体了解一下2024-09-09
MobX是一个强大而简单的状态管理工具,它可以帮助我们更好地组织和管理React应用程序中的数据流,本文给大家介绍react如何使用mobx6动态加载数据,感兴趣的朋友跟随小编一起看看吧2024-02-02
本文以简洁为目标，帮助快速上手react-router-dom默认你接触过路由相关的开发，通过实例代码讲解的很详细，对React路由相关知识感兴趣的朋友一起看看吧2021-05-05
这篇文章主要介绍了 React 组件中的 bind(this) ,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-09-09
这篇文章主要为大家介绍了React组件里this指向了undefined原理解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
最新评论