# react-skills-study
**Repository Path**: luoyuXiaogege/react-skills-study
## Basic Information
- **Project Name**: react-skills-study
- **Description**: 欢迎来到我的React技巧学习仓库！在这里，我致力于分享和教授各种React的高级技巧与最佳实践，旨在帮助开发者，比如你，提升在使用React构建高性能、易维护的Web应用程序方面的技能。这个仓库囊括了丰富的资源和实例，无论你是刚入门的初学者还是有一定经验的开发者，我相信这里的内容都将对你大有裨益。加入我们，一起深入学习，提升你的React技能吧！
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-08-07
- **Last Updated**: 2024-09-01
## Categories & Tags
**Categories**: Uncategorized
**Tags**: React
## README
# React Skills Study Dashboard
## tailwindcss
> Tailwind CSS 的工作原理是扫描所有 HTML 文件、JavaScript 组件和任何其他模板中的类名，生成相应的样式，然后将它们写入静态 CSS 文件。它快速、灵活、可靠 - 零运行时间。
### 使用 Tailwind CLI 工具来用
从头开始启动和运行 Tailwind CSS 的最简单、最快捷的方法是使用 Tailwind CLI 工具
1. 安装 Tailwind CSS
```bash
# 安装 Tailwind CSS
npm install -D tailwindcss
# 初始化配置文件
npx tailwindcss init
```
2. 将路径添加到文件中的所有模板文件。tailwind.config.js
```js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
};
```
3. 将 Tailwind 指令添加到您的 CSS 中(input.css)
```bash
@tailwind base;
@tailwind components;
@tailwind utilities;
```
4. 启动 Tailwind CLI 构建过程
```bash
npx tailwindcss -i ./src/input.css -o ./src/output.css --watch
```
5. 开始在 HTML 中使用 Tailwind
```html
Hello world!
```
### Tailwind 优点
- **您不会浪费精力发明类名。** 不再需要添加愚蠢的类名，就像能够设置某些东西的样式一样，也不再需要为实际上只是一个 flex 容器的东西的完美抽象名称而苦恼。sidebar-inner-wrapper
- **您的 CSS 停止增长。** 使用传统方法时，每次添加新功能时，您的 CSS 文件都会变大。使用实用程序，一切都是可重用的，因此您很少需要编写新的 CSS。
- **进行更改感觉更安全。** CSS 是全局的，当你做出改变时，你永远不知道你破坏了什么。HTML 中的类是本地的，因此您可以更改它们而不必担心其他内容会中断。