vite+react+tailwindcss的簡單使用方式
更新時間：2024年01月03日 09:40:40 作者：藥醬
這篇文章主要介紹了vite+react+tailwindcss的簡單使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
1. 使用vite創(chuàng)建react項目
yarn create vite my-react-app --template react
2. 添加tailwind.css相關(guān)依賴
- 2.1 添加tailwindcss postcss autoprefixer依賴
yarn add tailwindcss@latest postcss@latest autoprefixer@latest
- 2.2 使用命令
npx tailwindcss init，在根目錄創(chuàng)建tailwind.config.js文件，并寫入相關(guān)配置：
module.exports = {
purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
- 2.3 創(chuàng)建
tailwind.css文件，引入樣式文件，寫入配置，并在App.js引入：
@import "tailwindcss/base"; @import "tailwindcss/components"; @import "tailwindcss/utilities";
- 2.4 根目錄創(chuàng)建
postcss.config.js文件，并寫入相關(guān)配置：
module.exports = {
plugins: [
require("tailwindcss"),
require("autoprefixer")
],
};
3. 簡單使用，展示效果
- 3.1 測試代碼：
<button className="bg-red-500 hover:bg-blue-700"> Hover me </button>
- 3.2 效果展示：
從展示效果可見:tailwindcss在vite創(chuàng)建的react項目中成功的引入并使用。
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
react嵌套路由實現(xiàn)TabBar的實現(xiàn)
本文主要介紹了react嵌套路由實現(xiàn)TabBar的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
這篇文章主要介紹了解決配置setupProxy.js代理,頁面報錯404問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
使用Node搭建reactSSR服務(wù)端渲染架構(gòu)
這篇文章主要介紹了使用Node搭建reactSSR服務(wù)端渲染架構(gòu),小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
React中動態(tài)路由通過ReactRouter庫實現(xiàn),根據(jù)應(yīng)用狀態(tài)或用戶交互動態(tài)顯示或隱藏組件,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-11-11
react-json-editor-ajrm解析錯誤與解決方案
由于歷史原因,項目中 JSON 編輯器使用的是 react-json-editor-ajrm,近期遇到一個嚴(yán)重的展示錯誤,傳入編輯器的數(shù)據(jù)與展示的不一致,這是產(chǎn)品和用戶不可接受的,本文給大家介紹了react-json-editor-ajrm解析錯誤與解決方案,需要的朋友可以參考下2024-06-06
基于React的狀態(tài)管理實現(xiàn)一個簡單的顏色轉(zhuǎn)換器
這篇文章主要介紹了用React的狀態(tài)管理,簡簡單單實現(xiàn)一個顏色轉(zhuǎn)換器,文中有詳細(xì)的代碼示例供大家參考,具有一定的參考價值,需要的朋友可以參考下2023-08-08
最近在使用react開發(fā)項目，遇到這樣一個需求實現(xiàn)一個帶有動效的 React 彈窗組件，如果不考慮動效，很容易實現(xiàn)，接下來小編通過本文給大家介紹React實現(xiàn)動效彈窗組件的實現(xiàn)代碼，一起看看吧2021-06-06
這篇文章主要為大家介紹了React Native功能豐富的Toast通知庫使用示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
這篇文章主要為大家詳細(xì)介紹了如何在React中實現(xiàn)插槽，文中的示例代碼講解詳細(xì)，對我們的學(xué)習(xí)或工作具有一定的借鑒價值，需要的可以了解一下2023-03-03
這篇文章主要介紹了React Diff原理的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用React框架，感興趣的朋友可以了解下2021-04-04