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-hook-form-mui基本使用教程(入门篇)
react-hook-form-mui可以帮助开发人员更轻松地构建表单,它结合了React Hook Form和Material-UI组件库,使用react-hook-form-mui,开发人员可以更快速地构建表单,并且可以轻松地进行表单验证和数据处理,本文介绍React-hook-form-mui基本使用,感兴趣的朋友一起看看吧
2024-02-02
create-react-app修改为多页面支持的方法
本篇文章主要介绍了create-react-app修改为多页面支持的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-05-05
React的特征单向数据流学习
这篇文章主要为大家介绍了React的特征单向数据流学习，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-09-09
react实现点击选中的li高亮的示例代码
本篇文章主要介绍了react实现选中的li高亮的示例代码，页面上有很多个li，要实现点击到哪个就哪个高亮。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-05-05
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
最近在做一个后台管理项目，涉及到react相关知识，项目需求需要在表单中带附件提交，怎么实现这个功能呢？下面小编给大家带来了react使用antd的上传组件实现文件表单一起提交功能，一起看看吧
2021-06-06
React初始化渲染过程示例详解
这篇文章主要为大家介绍了React初始化渲染过程示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-09-09
webpack 2的react开发配置实例代码
本篇文章主要介绍了webpack 2的react开发配置实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-07-07
React实现轮播图效果
这篇文章主要为大家详细介绍了React实现轮播图效果，使用react-slick组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
ChatGLM 集成LangChain工具详解
这篇文章主要为大家介绍了Svelte和React框架使用比较，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-04-04
react中useState使用:如何实现在当前表格直接更改数据
这篇文章主要介绍了react中useState的使用:如何实现在当前表格直接更改数据，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08