# tailwind-demo
**Repository Path**: smith1618/tailwind-demo
## Basic Information
- **Project Name**: tailwind-demo
- **Description**: tailwind css test demo
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-10-15
- **Last Updated**: 2024-10-15
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# 初始化项目 生成一个 项目包管理配置文件
npm init -y
# vscode 安装插件 提示插件 和 显示详细信息
Tailwind CSS IntelliSense
Tailwind Snippets
# 安装 tailwindcss
npm i -D tailwindcss
# 初始化 tailwindcss ; 会生成一个 tailwindcss 的配置文件 tailwind.config.js
npx tailwindcss init
# 本地启动一个 调试用的服务器
npm install --save-dev lite-server // 安装服务包
# 在 package.json 中配置服务启动命令
"start":"lite-server"
# 在 tailwind.config.js 中配置 要监听编译哪些 文件中的 css 样式
content: ["./public/**/*.{html,js,ts}"],
# 编译本地可以使用 样式文件 并引入到 文件中 ； src/tailwind.css 文件创建 ； 文件内容如下
@tailwind base;
@tailwind components;
@tailwind utilities;
# 将上面文件 导出可引用的 css 文件 ; 监听文件变化 实时更新 不要关闭窗口
npx tailwindcss -i ./src/tailwind.css -o ./dist/tailwind.css --watch
# 在 public 下创建一个测试文件 index.html 文件对样式进行测试
```html
tailwind css
hello tailwind css
```
# 启动lite-serve 查看效果
npm start
# 访问启动地址下的 文件 eg ： http://localhost:3001/public/index.html