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相關依賴

2.1 添加tailwindcss postcss autoprefixer依賴

yarn add tailwindcss@latest postcss@latest autoprefixer@latest

2.2 使用命令npx tailwindcss init，在根目錄創(chuàng)建tailwind.config.js文件，并寫入相關配置：

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文件，并寫入相關配置：

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項目中成功的引入并使用。

總結

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

react學習筆記之state以及setState的使用
這篇文章主要介紹了react學習筆記之state以及setState的使用,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-12-12
react中使用forEach或map兩種方式遍歷數組
這篇文章主要介紹了react中使用forEach或map兩種方式遍歷數組，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-09-09
React?Hydrate原理源碼解析
這篇文章主要為大家介紹了React?Hydrate原理源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-01-01
React Mobx狀態(tài)管理工具的使用
這篇文章主要介紹了React Mobx狀態(tài)管理工具的使用，MobX是一個狀態(tài)管理庫，它會自動收集并追蹤依賴，開發(fā)人員不需要手動訂閱狀態(tài)，當狀態(tài)變化之后MobX能夠精準更新受影響的內容，另外它不要求state是可JSON序列化的，也不要求state是immutable
2023-02-02
React教程之封裝一個Portal可復用組件的方法
react的核心之一是組件，下面這篇文章主要給大家介紹了關于React教程之封裝一個Portal可復用組件的相關資料，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考借鑒，下面隨著小編來一起學習學習吧。
2018-01-01
react-router實現(xiàn)按需加載
本篇文章主要介紹了react-router實現(xiàn)按需加載，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-05-05
react開發(fā)中如何使用require.ensure加載es6風格的組件
本篇文章主要介紹了react開發(fā)中如何使用require.ensure加載es6風格的組件，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-05-05
一文詳解手動實現(xiàn)Recoil狀態(tài)管理基本原理
這篇文章主要為大家介紹了一文詳解手動實現(xiàn)Recoil狀態(tài)管理基本原理實例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-05-05
React之錯誤邊界 Error Boundaries示例詳解
這篇文章主要為大家介紹了React之錯誤邊界Error Boundaries示例教程，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-10-10
react的嚴格模式和解決react useEffect執(zhí)行兩次問題
文章總結：本文詳細探討了React中useEffect執(zhí)行兩次的問題,主要歸因于React的嚴格模式,嚴格模式在開發(fā)模式下會故意重復調用一些生命周期方法,以幫助開發(fā)者發(fā)現(xiàn)潛在的問題,包括不安全的生命周期、過時的ref API、廢棄的findDOMNode方法、意外的副作用等
2025-01-01