React使用TailwindCSS的實(shí)現(xiàn)示例
TailwindCSS是一個(gè)實(shí)用優(yōu)先的 CSS 框架，包含 flex、pt-4、text-center 和 rotate-90 等類，可以直接在您的標(biāo)記中組合以構(gòu)建任何設(shè)計(jì)。
下載及初始化
可以查看官網(wǎng)對照自己使用的框架進(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í)書寫代碼沒有提示，體驗(yàn)很差，可以下載一個(gè)插件Tailwind CSS IntelliSense
下載完成后，書寫代碼，輸入空格后發(fā)現(xiàn)出現(xiàn)提示
到此這篇關(guān)于React使用TailwindCSS的實(shí)現(xiàn)示例的文章就介紹到這了,更多相關(guān)React TailwindCSS內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
詳解vant2 自動(dòng)檢查表單驗(yàn)證 -validate
這篇文章主要介紹了vant2 自動(dòng)檢查表單驗(yàn)證 -validate,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-10-10
解決React報(bào)錯(cuò)Cannot assign to 'current'
這篇文章主要為大家介紹了React報(bào)錯(cuò)Cannot assign to 'current' because it is a read-only property的解決方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
這篇文章主要介紹了Vite搭建React項(xiàng)目的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
這篇文章主要介紹了淺談react路由傳參的幾種方式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
react-native?父函數(shù)組件調(diào)用類子組件的方法(實(shí)例詳解)
這篇文章主要介紹了react-native?父函數(shù)組件調(diào)用類子組件的方法,通過詳細(xì)步驟介紹了React 函數(shù)式組件之父組件調(diào)用子組件的方法，代碼簡單易懂，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-09-09
這篇文章主要介紹了React中使用Vditor自定義圖片詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
react-native 完整實(shí)現(xiàn)登錄功能的示例代碼
本篇文章主要介紹了react-native 完整實(shí)現(xiàn)登錄功能的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
react學(xué)習(xí)筆記之state以及setState的使用
這篇文章主要介紹了react學(xué)習(xí)筆記之state以及setState的使用,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12
React Native 自定義下拉刷新上拉加載的列表的示例
本篇文章主要介紹了React Native 自定義下拉刷新上拉加載的列表的示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03
ReactNative頁面跳轉(zhuǎn)實(shí)例代碼
這篇文章主要介紹了ReactNative頁面跳轉(zhuǎn)的代碼,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-09-09