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
如果一切正常，那么页面应该展示如下：
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
在 React 中,可以通过 JavaScript 的条件语句来动态渲染组件或元素,下面给大家分享几种常用的在 React 中处理条件渲染的方法,感兴趣的朋友跟随小编一起看看吧2024-08-08
React 是一个用于构建用户界面的 JAVASCRIPT 库。这篇文章主要介绍了React组件的两种创建方式,一种是使用函数创建组件另一种是使用类创建组件，需要的朋友可以参考下2021-11-11
这篇文章主要介绍了React移动端项目之pdf预览问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-02-02
这篇文章主要介绍了JavaScript React如何修改默认端口号方法详解，文中通过步骤图片解析介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
本文主要介绍了React 项目中动态设置环境变量，本文将介绍两种常用的方法，使用 dotenv 库和通过命令行参数传递环境变量，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
很多小伙伴反馈React ant 点击导航条闪烁,没有传递具体的参数给点击事件 , 导致在函数内部无法准确判断要展示哪个子菜单,可能导致页面状态的短暂变化,出现闪烁效果,下面给大家分享解决方法,感兴趣的的朋友跟随小编一起看看吧2024-04-04
这篇文章主要介绍了react中使用usestate踩坑及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要为大家详细介绍了react实现Modal弹窗效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
这篇文章主要为大家详细介绍了React实现歌词滚动效果(跟随音乐播放使劲按滚动),文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2024-02-02
这篇文章主要介绍了在React中强制重新渲染的4 种方式,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-12-12
最新评论