vite+react+tailwindcss的简单使用方式

更新时间：2024年01月03日 09:40:40 作者：药酱

这篇文章主要介绍了vite+react+tailwindcss的简单使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

1. 使用vite创建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，在根目录创建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 创建tailwind.css文件，引入样式文件，写入配置，并在App.js引入：

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

2.4 根目录创建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创建的react项目中成功的引入并使用。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

react中的虚拟dom和diff算法详解
这篇文章主要介绍了react中的虚拟dom和diff算法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-04-04
React弹窗使用方式NiceModal重新思考
这篇文章主要为大家介绍了React弹窗使用方式NiceModal重新思考分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-08-08
ReactNative支付密码输入框实现详解
这篇文章主要为大家介绍了ReactNative支付密码输入框实现详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-11-11
React-Native 桥接iOS原生开发详解
本篇文章主要介绍了React-Native 桥接iOS原生开发详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-01-01
React如何配置src根目录@
这篇文章主要介绍了React如何配置src根目录@,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2024-01-01
React中useEffect函数的使用详解
useEffect是React中的一个钩子函数,用于处理副作用操作,这篇文章主要为大家介绍了React中useEffect函数的具体用法,希望对大家有所帮助
2023-08-08
如何不使用eject修改create-react-app的配置
许多刚开始接触create-react-app框架的同学，不免都会有个疑问：如何在不执行eject操作的同时，修改create-react-app的配置。
2021-04-04
React中immutable的UI组件渲染性能详解
这篇文章主要为大家介绍了React中immutable的UI组件渲染性能详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-04-04
React竞态条件Race Condition实例详解
这篇文章主要为大家介绍了React竞态条件Race Condition实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-11-11
react 项目中使用 Dllplugin 打包优化技巧
在用 Webpack 打包的时候，对于一些不经常更新的第三方库，比如 react，lodash，vue 我们希望能和自己的代码分离开，这篇文章主要介绍了react 项目中使用 Dllplugin 打包优化,需要的朋友可以参考下
2023-01-01