# tailwindcss-use

**Repository Path**: wshcdr/tailwindcss-use

## Basic Information

- **Project Name**: tailwindcss-use
- **Description**: 原生html、多页面使用 tailwindcss
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2024-07-18
- **Last Updated**: 2024-07-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 原生多页面使用 tailwind.css
官网：https://www.tailwindcss.cn/docs/installation

## 一、使用
### 1、命令行方式
  #### 1.1 安装 
  `pnpm add -D tailwindcss`
  #### 1.2 初始化,生成tailwind.config.js。vscode中安装了tailwindcss插件，会有提示
  `npx tailwindcss init`
  #### 1.3 配置模板路径
  ```
    /** @type {import('tailwindcss').Config} */
    module.exports = {
      content: ['./src/**/*.{html,js}', './src/**/**/*.{html,js}', './pages/**/*.{html,js}', './index.html'],
      theme: {
        extend: {},
      },
      plugins: [],
    }
  ```
  #### 1.4 将tailwind指令放在根目录 main.css中
  ```
    @tailwind base;
    @tailwind components;
    @tailwind utilities;
  ```
  #### 1.5 构建 Tailwind CLI
  `npx tailwindcss -i ./main.css -o ./css/main.css --watch`
  生成的的文件会在 css/main.css 中
  #### 1.6 引入样式
  `<link href="./css/main.css" rel="stylesheet">`

  #### 1.7 注意：提示：要看
  若不想在项目中保留package.json等相关文件，可以只保留以下 2 个文件
  . tailwind.config.js
  . css/main.css

### CDN方式
  页面直接引入
  `<script src="https://cdn.tailwindcss.com"></script>`