reactjs學(xué)習(xí)解決unknown at rule @tailwind css問題

更新時(shí)間：2023年02月12日 15:12:45 作者：漫漫想想

這篇文章主要介紹了reactjs學(xué)習(xí)解決unknown at rule @tailwind css問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

解決unknown at rule @tailwind css

安裝tailwind，以及配置了tailwind css intellisense也無法解決在global.css中報(bào)錯(cuò)unknown at rule @tailwind css

這個(gè)問題在tailwindcss的官網(wǎng)也有描述

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.

這個(gè)問題對于正常開發(fā)沒有什么問題，但是為了使編譯器兼容，避免報(bào)錯(cuò)可以配置一個(gè)PostCSS Language Support插件，使得編譯器可以識(shí)別tailwindcss直接在css使用@語法報(bào)錯(cuò)以及module下報(bào)錯(cuò)。

React配置Tailwindcss問題

最近在react上配置tailwindcss時(shí)出現(xiàn)了一些問題，按照官網(wǎng)給出的文檔配置完成后沒有報(bào)錯(cuò)但css效果無法顯示，在此記錄最終解決方案。

步驟

1.首先利用npx建立react項(xiàng)目

npx creat-react-app my_app
cd my_app

2.利用npm安裝tailwindcss，postcss，autoprefixer

npm install -D tailwindcss postcss autoprefixer

3.創(chuàng)建tailwindcss以及postcss的配置文件

npx tailwindcss init -p

在完成第三步后，項(xiàng)目根目錄下會(huì)出現(xiàn)兩個(gè)配置文件分別是: postcss.config.js，tailwindcss.config.js

4.打開tailwindcss.config.js，修改成如下內(nèi)容：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js, jsx, ts, tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

5.打開index.css，并替換成如下內(nèi)容

@tailwind base;
@tailwind components;
@tailwind utilities;

完成以上五個(gè)步驟后，tailwindcss就配置完成了，下面進(jìn)行簡單測試。

測試

打開App.js，將里面的內(nèi)容替換成如下代碼：

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;

根目錄執(zhí)行

npm start

如果一切正常，那么頁面應(yīng)該展示如下：

在這里插入圖片描述

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

阿里低代碼框架lowcode-engine自定義設(shè)置器詳解
這篇文章主要為大家介紹了阿里低代碼框架lowcode-engine自定義設(shè)置器示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-02-02
react build 后打包發(fā)布總結(jié)
這篇文章主要介紹了react build 后打包發(fā)布總結(jié)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-08-08
React?Context源碼實(shí)現(xiàn)原理詳解
這篇文章主要為大家介紹了React?Context源碼實(shí)現(xiàn)原理示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-10-10
react-router-dom 嵌套路由的實(shí)現(xiàn)
這篇文章主要介紹了react-router-dom 嵌套路由的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-05-05
在React中編寫樣式的六種方式
在React中,編寫樣式主要有以下幾種方式,內(nèi)聯(lián)樣式,外部樣式表,CSS Modules,Styled Components,Emotion和Radium這六種樣式,下面我將針對上面提到的6種方式給出詳細(xì)的代碼示例,需要的朋友可以參考下
2024-01-01
React函數(shù)組件傳參的實(shí)現(xiàn)
React函數(shù)組件通過接受props實(shí)現(xiàn)組件間的數(shù)據(jù)傳遞,通過組件標(biāo)簽的屬性向子組件傳遞數(shù)據(jù),并在子組件中通過參數(shù)接收,還可以使用ES6的解構(gòu)賦值,函數(shù)也能作為props傳遞,以實(shí)現(xiàn)父子組件間的交互和通信,下面就來具體了解一下
2024-09-09
react如何使用mobx6動(dòng)態(tài)加載數(shù)據(jù)
MobX是一個(gè)強(qiáng)大而簡單的狀態(tài)管理工具,它可以幫助我們更好地組織和管理React應(yīng)用程序中的數(shù)據(jù)流,本文給大家介紹react如何使用mobx6動(dòng)態(tài)加載數(shù)據(jù),感興趣的朋友跟隨小編一起看看吧
2024-02-02
無廢話快速上手React路由開發(fā)
本文以簡潔為目標(biāo)，幫助快速上手react-router-dom默認(rèn)你接觸過路由相關(guān)的開發(fā)，通過實(shí)例代碼講解的很詳細(xì)，對React路由相關(guān)知識(shí)感興趣的朋友一起看看吧
2021-05-05
React 組件中的 bind(this)示例代碼
這篇文章主要介紹了 React 組件中的 bind(this) ,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2018-09-09
React組件里this指向了undefined原理解析
這篇文章主要為大家介紹了React組件里this指向了undefined原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-03-03