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学习笔记之state以及setState的使用
这篇文章主要介绍了react学习笔记之state以及setState的使用,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-12-12
react中使用forEach或map两种方式遍历数组
这篇文章主要介绍了react中使用forEach或map两种方式遍历数组，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
React Hydrate原理源码解析
这篇文章主要为大家介绍了React Hydrate原理源码解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-01-01
React Mobx状态管理工具的使用
这篇文章主要介绍了React Mobx状态管理工具的使用，MobX是一个状态管理库，它会自动收集并追踪依赖，开发人员不需要手动订阅状态，当状态变化之后MobX能够精准更新受影响的内容，另外它不要求state是可JSON序列化的，也不要求state是immutable
2023-02-02
React教程之封装一个Portal可复用组件的方法
react的核心之一是组件，下面这篇文章主要给大家介绍了关于React教程之封装一个Portal可复用组件的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面随着小编来一起学习学习吧。
2018-01-01
react-router实现按需加载
本篇文章主要介绍了react-router实现按需加载，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-05-05
react开发中如何使用require.ensure加载es6风格的组件
本篇文章主要介绍了react开发中如何使用require.ensure加载es6风格的组件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-05-05
一文详解手动实现Recoil状态管理基本原理
这篇文章主要为大家介绍了一文详解手动实现Recoil状态管理基本原理实例解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-05-05
React之错误边界 Error Boundaries示例详解
这篇文章主要为大家介绍了React之错误边界Error Boundaries示例教程，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-10-10
react的严格模式和解决react useEffect执行两次问题
文章总结：本文详细探讨了React中useEffect执行两次的问题,主要归因于React的严格模式,严格模式在开发模式下会故意重复调用一些生命周期方法,以帮助开发者发现潜在的问题,包括不安全的生命周期、过时的ref API、废弃的findDOMNode方法、意外的副作用等
2025-01-01