快捷導(dǎo)航

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

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

這篇文章主要介紹了reactjs學(xué)習(xí)解決unknown at rule @tailwind css問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(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è)問題對(duì)于正常開發(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)行簡單測(cè)試。

測(cè)試

打開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)文章

React 實(shí)現(xiàn)井字棋的示例代碼
本文主要介紹了React 實(shí)現(xiàn)井字棋,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2024-07-07
React關(guān)于antd table中select的設(shè)值更新問題
這篇文章主要介紹了React關(guān)于antd table中select的設(shè)值更新問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
React報(bào)錯(cuò)Element type is invalid解決案例
這篇文章主要為大家介紹了React報(bào)錯(cuò)Element type is invalid解決案例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-12-12
如何在react項(xiàng)目中做公共配置文件
這篇文章主要介紹了如何在react項(xiàng)目中做公共配置文件問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
React 路由懶加載的幾種實(shí)現(xiàn)方案
這篇文章主要介紹了React 路由懶加載的幾種實(shí)現(xiàn)方案，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-10-10
React實(shí)現(xiàn)生成和導(dǎo)出Word文檔的方法詳解
React是一個(gè)流行的JavaScript庫,用于構(gòu)建現(xiàn)代前端應(yīng)用程序,本文將深入探討如何在React中生成和導(dǎo)出Word文檔,感興趣的小伙伴可以學(xué)習(xí)一下
2023-09-09
淺談React Component生命周期函數(shù)
React組件有哪些生命周期函數(shù)？類組件才有的生命周期函數(shù)，分為幾個(gè)階段：掛載，更新，卸載，錯(cuò)誤處理，本文主要介紹了這個(gè)階段，感興趣的可以了解一下
2021-06-06
React項(xiàng)目打包發(fā)布到Tomcat頁面空白問題及解決
這篇文章主要介紹了React項(xiàng)目打包發(fā)布到Tomcat頁面空白問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-06-06
使用React?MUI庫實(shí)現(xiàn)用戶列表分頁功能
MUI是一款基于React的UI組件庫，可以方便地構(gòu)建美觀的用戶界面，使用MUI的DataTable組件和分頁器組件可以輕松實(shí)現(xiàn)用戶列表分頁功能，這篇文章使用MUI庫實(shí)現(xiàn)了用戶列表分頁功能，感興趣的同學(xué)可以參考下文
2023-05-05
如何使用React構(gòu)建一個(gè)高效的視頻上傳組件
本文介紹了如何使用React構(gòu)建一個(gè)高效的視頻上傳組件,包括基礎(chǔ)概念、常見問題與解決方案以及易錯(cuò)點(diǎn),通過實(shí)際代碼案例,展示了如何實(shí)現(xiàn)文件大小和格式驗(yàn)證、上傳進(jìn)度顯示等功能,并詳細(xì)解釋了跨域請(qǐng)求和并發(fā)上傳控制等技術(shù)細(xì)節(jié)
2025-01-01