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
如果一切正常,那么页面应该展示如下:
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。