reactjs學(xué)習(xí)解決unknown at rule @tailwind css問題
解決unknown at rule @tailwind css
安裝tailwind，以及配置了tailwind css intellisense也無法解決在global.css中報(bào)錯unknown at rule @tailwind css
這個問題在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.
這個問題對于正常開發(fā)沒有什么問題，但是為了使編譯器兼容，避免報(bào)錯可以配置一個PostCSS Language Support插件，使得編譯器可以識別tailwindcss直接在css使用@語法報(bào)錯以及module下報(bào)錯。
React配置Tailwindcss問題
最近在react上配置tailwindcss時出現(xiàn)了一些問題，按照官網(wǎng)給出的文檔配置完成后沒有報(bào)錯但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)目根目錄下會出現(xiàn)兩個配置文件分別是: 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;
完成以上五個步驟后，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é)
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
阿里低代碼框架lowcode-engine自定義設(shè)置器詳解
這篇文章主要為大家介紹了阿里低代碼框架lowcode-engine自定義設(shè)置器示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
這篇文章主要介紹了react build 后打包發(fā)布總結(jié)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧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í)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
在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動態(tài)加載數(shù)據(jù)
MobX是一個強(qiáng)大而簡單的狀態(tài)管理工具,它可以幫助我們更好地組織和管理React應(yīng)用程序中的數(shù)據(jù)流,本文給大家介紹react如何使用mobx6動態(tài)加載數(shù)據(jù),感興趣的朋友跟隨小編一起看看吧2024-02-02
本文以簡潔為目標(biāo)，幫助快速上手react-router-dom默認(rèn)你接觸過路由相關(guān)的開發(fā)，通過實(shí)例代碼講解的很詳細(xì)，對React路由相關(guān)知識感興趣的朋友一起看看吧2021-05-05
這篇文章主要介紹了 React 組件中的 bind(this) ,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-09-09
這篇文章主要為大家介紹了React組件里this指向了undefined原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03