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安装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 (
    

Welcome!

Hello React and tailwindcss

); } export default App;

根目录执行

npm start

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

reactjs学习解决unknown at rule @tailwind css问题_第1张图片

总结

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

你可能感兴趣的:(reactjs学习解决unknown at rule @tailwind css问题)