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嵌套路由实现TabBar的实现
本文主要介绍了react嵌套路由实现TabBar的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-08-08
解决配置setupProxy.js代理,页面报错404问题
这篇文章主要介绍了解决配置setupProxy.js代理,页面报错404问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-07-07
使用Node搭建reactSSR服务端渲染架构
这篇文章主要介绍了使用Node搭建reactSSR服务端渲染架构,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-08-08
react动态路由的实现示例
React中动态路由通过ReactRouter库实现,根据应用状态或用户交互动态显示或隐藏组件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2024-11-11
react-json-editor-ajrm解析错误与解决方案
由于历史原因,项目中 JSON 编辑器使用的是 react-json-editor-ajrm,近期遇到一个严重的展示错误,传入编辑器的数据与展示的不一致,这是产品和用户不可接受的,本文给大家介绍了react-json-editor-ajrm解析错误与解决方案,需要的朋友可以参考下
2024-06-06
基于React的状态管理实现一个简单的颜色转换器
这篇文章主要介绍了用React的状态管理,简简单单实现一个颜色转换器,文中有详细的代码示例供大家参考,具有一定的参考价值,需要的朋友可以参考下
2023-08-08
React实现动效弹窗组件
最近在使用react开发项目，遇到这样一个需求实现一个带有动效的 React 弹窗组件，如果不考虑动效，很容易实现，接下来小编通过本文给大家介绍React实现动效弹窗组件的实现代码，一起看看吧
2021-06-06
React Native功能丰富的Toast通知库
这篇文章主要为大家介绍了React Native功能丰富的Toast通知库使用示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-10-10
一文详解如何React中实现插槽
这篇文章主要为大家详细介绍了如何在React中实现插槽，文中的示例代码讲解详细，对我们的学习或工作具有一定的借鉴价值，需要的可以了解一下
2023-03-03
React Diff原理深入分析
这篇文章主要介绍了React Diff原理的相关资料，帮助大家更好的理解和学习使用React框架，感兴趣的朋友可以了解下
2021-04-04