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 等類，可以直接在您的標記中組合以構(gòu)建任何設(shè)計。
下載及初始化
可以查看官網(wǎng)對照自己使用的框架進行配置
npm install -D tailwindcss postcss autoprefixer
下載完畢后執(zhí)行如下命令
npx tailwindcss init -p
可以發(fā)現(xiàn)項目中多了兩個文件
其中默認已經(jīng)進行了配置，我們需要將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)文章
這篇文章主要介紹了vant2 自動檢查表單驗證 -validate,本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-10-10
解決React報錯Cannot assign to 'current'
這篇文章主要為大家介紹了React報錯Cannot assign to 'current' because it is a read-only property的解決方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
這篇文章主要介紹了Vite搭建React項目的方法步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-04-04
這篇文章主要介紹了淺談react路由傳參的幾種方式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-03-03
react-native?父函數(shù)組件調(diào)用類子組件的方法(實例詳解)
這篇文章主要介紹了react-native?父函數(shù)組件調(diào)用類子組件的方法,通過詳細步驟介紹了React 函數(shù)式組件之父組件調(diào)用子組件的方法，代碼簡單易懂，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-09-09
這篇文章主要介紹了React中使用Vditor自定義圖片詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-12-12
react-native 完整實現(xiàn)登錄功能的示例代碼
本篇文章主要介紹了react-native 完整實現(xiàn)登錄功能的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了react學習筆記之state以及setState的使用,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
React Native 自定義下拉刷新上拉加載的列表的示例
本篇文章主要介紹了React Native 自定義下拉刷新上拉加載的列表的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了ReactNative頁面跳轉(zhuǎn)的代碼,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-09-09