React使用TailwindCSS的實(shí)現(xiàn)示例
TailwindCSS是一個(gè)實(shí)用優(yōu)先的 CSS 框架，包含 flex、pt-4、text-center 和 rotate-90 等類(lèi)，可以直接在您的標(biāo)記中組合以構(gòu)建任何設(shè)計(jì)。
下載及初始化
可以查看官網(wǎng)對(duì)照自己使用的框架進(jìn)行配置
npm install -D tailwindcss postcss autoprefixer
下載完畢后執(zhí)行如下命令
npx tailwindcss init -p
可以發(fā)現(xiàn)項(xiàng)目中多了兩個(gè)文件
其中默認(rèn)已經(jīng)進(jìn)行了配置，我們需要將tailwind.config.js更改配置為如下：
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
在index.css（你的全局css文件）中添加如下：
@tailwind base; @tailwind components; @tailwind utilities;
此時(shí)發(fā)現(xiàn)有警告，只需要在設(shè)置中搜索unkown，然后將如下設(shè)置為ignore即可。如果你是用的是less或者scss，下滑可以找到選項(xiàng)。
基本使用
輸入以下代碼，看到效果如下
<h1 className="text-3xl font-bold underline"> Hello world! </h1>
但此時(shí)書(shū)寫(xiě)代碼沒(méi)有提示，體驗(yàn)很差，可以下載一個(gè)插件Tailwind CSS IntelliSense
下載完成后，書(shū)寫(xiě)代碼，輸入空格后發(fā)現(xiàn)出現(xiàn)提示
到此這篇關(guān)于React使用TailwindCSS的實(shí)現(xiàn)示例的文章就介紹到這了,更多相關(guān)React TailwindCSS內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
React中關(guān)于render()的用法及說(shuō)明
這篇文章主要介紹了React中關(guān)于render()的用法及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
react-router-dom v6版本跳轉(zhuǎn)路徑的實(shí)現(xiàn)方法
這篇文章主要介紹了react-router-dom v6版本跳轉(zhuǎn)路徑的實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
詳解vant2 自動(dòng)檢查表單驗(yàn)證 -validate
這篇文章主要介紹了vant2 自動(dòng)檢查表單驗(yàn)證 -validate,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-10-10
在create-react-app中使用css modules的示例代碼
這篇文章主要介紹了在create-react-app中使用css modules的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
react中hooks使用useState的更新不觸發(fā)dom更新問(wèn)題及解決
這篇文章主要介紹了react中hooks使用useState的更新不觸發(fā)dom更新問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
React實(shí)現(xiàn)登錄界面的項(xiàng)目實(shí)踐
本文主要介紹了用React創(chuàng)建登錄表單,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2025-09-09
React中實(shí)現(xiàn)使用條件渲染來(lái)顯示不同的內(nèi)容
在React中,條件渲染是根據(jù)不同的條件選擇性地渲染組件,本文介紹了三種常見(jiàn)的條件渲染方式：使用if語(yǔ)句、使用三元運(yùn)算符和使用短路運(yùn)算符,通過(guò)這些方法,我們可以根據(jù)應(yīng)用的狀態(tài)和用戶的操作動(dòng)態(tài)地顯示不同的內(nèi)容,從而提升用戶體驗(yàn)和組件的可維護(hù)性2025-02-02
React+Vite從零搭建項(xiàng)目及配置的實(shí)現(xiàn)
本文主要介紹了React+Vite從零搭建項(xiàng)目及配置的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2025-04-04
react實(shí)現(xiàn)無(wú)限循環(huán)滾動(dòng)信息
這篇文章主要為大家詳細(xì)介紹了react實(shí)現(xiàn)無(wú)限循環(huán)滾動(dòng)信息，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
React的事件系統(tǒng)和瀏覽器事件系統(tǒng)相比,主要增加了兩個(gè)特性：事件代理、和事件自動(dòng)綁定,本文主要介紹了React 組件中實(shí)現(xiàn)事件代理,具有一定的參考價(jià)值,感興趣的可以了解一下2024-01-01