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