在react中使用tailwind的問題
更新時間：2022年10月09日 10:44:26 作者：非典小馬
這篇文章主要介紹了在react中使用tailwind的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
react使用tailwind
現(xiàn)創(chuàng)建react項目
npx create-react-app name
進入創(chuàng)建的項目文件夾，安裝tailwind,postcss,autoprefixer
因為react自帶安裝了上一版本的postcss,所以這里要特別指定安裝對應(yīng)的舊版本。
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwind/postcss7-compat postcss@^7 autoprefixer@^9
又由于react本身不讓我們覆寫它的postcss設(shè)定，所以要另外安裝craco這個工具
npm i @craco/craco
下載完后，打開package.json文件，修改scripts中start,build,test的react-scripts為craco
然后生成一個和package.json同級的craco.config.js,編寫如下
module.exports = {
style: {
postcss: {
plugins: [
require('tailwindcss'),
require('autoprefixer')
]
}
}
}
這里的設(shè)定代表原先的postcss設(shè)定文件
然后
npx tailwindcss init`
初始化tailwind的設(shè)定文件tailwind.config.js,設(shè)定purge的數(shù)組為src的目錄以及public文件夾下的index.html
'./src/**/*.{js,jsx,ts,tsx}',
'./public/index.html'
然后編輯src目錄下的index.css，清空里面的內(nèi)容，然后加載tailwind三大部件。
@tailwind base; @tailwind components; @tailwind utilities;
到此為止，已經(jīng)可以基本使用tailwind樣式了，在App組件中嘗試一下
import pic from './malibu.jpg'
function App() {
return (
<div className="antialiased text-gray-900 bg-gray-200 min-h-screen p-8 flex items-center flex-col justify-center min-w-screen">
<div className="p-4 bg-indigo-300 rounded-3xl ">
<h1 className=" text-xl font-semibold text-gray-500">Tailwind CSS</h1>
<div className="w-24 mt-3">
<img className="rounded-lg shadow-md" src={pic} alt="pic" />
</div>
<div className="">
<span className="float-left mt-2 p-2 bg-green-300 text-sm font-black rounded-full shadow-sm">Nice view!</span>
<div></div>
<span className=" mr-100% float-right mt-2 p-2 bg-white text-sm font-black rounded-full shadow-sm">Go now?</span>
</div>
</div>
</div>
);
}
export default App;效果圖
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
解決React報錯Cannot assign to 'current'
這篇文章主要為大家介紹了React報錯Cannot assign to 'current' because it is a read-only property的解決方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
本文主要介紹了淺談React組件props默認值的設(shè)置，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
React hook 'useState' is calle
這篇文章主要為大家介紹了React hook 'useState' is called conditionally報錯解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
在開發(fā)React應(yīng)用時,嚴格模式StrictMode可以幫助開發(fā)者捕捉到組件中的錯誤和潛在問題,安裝React Developer Tools瀏覽器擴展檢查組件的props和狀態(tài),直接修改以及分析性能,@testing-library/react和Cypress或Playwright等工具可以有效地測試React組件和執(zhí)行端到端測試2024-10-10
React前端渲染優(yōu)化--父組件導(dǎo)致子組件重復(fù)渲染的問題
本篇文章是針對父組件導(dǎo)致子組件重復(fù)渲染的優(yōu)化方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了React 實現(xiàn)車牌鍵盤的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
這篇文章主要介紹了前端 react 實現(xiàn)圖片上傳前壓縮(縮率圖),本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-08-08
這篇文章主要介紹了React的組件協(xié)同使用,文中給大家提到在React開發(fā)中，有哪些場景的組件協(xié)同？又如何去實現(xiàn)組件的協(xié)同使用呢？本文都給大家提到，感興趣的朋友跟隨小編一起看看吧2021-09-09
react項目打包后點擊index.html頁面出現(xiàn)空白的問題
這篇文章主要介紹了react項目打包后點擊index.html頁面出現(xiàn)空白的問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
React Native 集成 ArcGIS 地圖的詳細過程
ArcGIS官方提供了 JavaScript SDK,也提供了 ArcGIS-Runtime-SDK-iOS,但是并沒有提供 React Native的版本,所以這里使用了 react-native-arcgis-mapview 庫,本文給大家介紹React Native 集成 ArcGIS 地圖的詳細過程,感興趣的朋友跟隨小編一起看看吧2024-06-06