# tailwind-css-beginer
**Repository Path**: chen-xiaohui1914/tailwind-css-beginer
## Basic Information
- **Project Name**: tailwind-css-beginer
- **Description**: tailwind-css-beginer
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-02-23
- **Last Updated**: 2023-03-17
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# tailwindcss
## 无需离开您的HTML，即可快速建立现代网站。
Tailwind CSS 是一个功能类优先的 CSS 框架，它集成了诸如 `flex`, `pt-4`, `text-center` 和 `rotate-90` 这样的的类，它们能直接在脚本标记语言中组合起来，构建出任何设计。
## 开始使用 确保你安装了 node
> $ npm install tailwindcss
## 简单使用
在 vscode 新建一个项目
> npx tailwindcss init
会得到 tailwind.config.js 这个文件
接下来我们需要添加**模板路径（tailwind 的应用范围）** 在 tailwind.config.js 文件中的 content 选项下
是指 build 文件夹下的所有 后缀为 html 的 文件
创建 style.css 文件 配置 导入 tailwind 的基础指令组件
### 执行 npx tailwindcss -i ./style.css -o ./build/css/style.css
> npx tailwindcss -i ./style.css -o ./build/css/style.css
编译 style.css 输出 ./build/css/style.css 会生成 tailwindcss的基本样式
之后在 index.html 中引入 就可以了
### ！ 由于每次编写代码之后 都要再编译一次
> npx tailwindcss -i ./style.css -o ./build/css/style.css
可以执行以下代码 --watch 就是说代码每次变化后都自动执行 **类似 live server **
#### npx tailwindcss -i ./style.css -o ./build/css/style.css --watch
试验 一下
tailwindcss 官网上的案例
```html
tailwind
```
得到该效果
## 在项目中 使用
### 1.安装 tailwindcss
> npm install -D tailwindcss postcss autoprefixer
### 2.初始化 tailwindcss
> npx tailwindcss init
### 3.在 tailwind.config.js 中 content 输入 需要 编译 tailwind 的应用范围
### 4. 在input.css中
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```
### 5.引入编译后的style.css
[完整项目 连接]: https://gitee.com/chen-xiaohui1914/tailwind-css-beginer "（demo）"
效果：
