Tailwind CSS的安装

Tailwind CSS的安装

Tailwind CSS 的工作原理是扫描所有 HTML 文件、JavaScript 组件以及任何 模板中的 CSS 类（class）名，然后生成相应的样式代码并写入 到一个静态 CSS 文件中。

记录时间：

年	月	日	时间	星期
2023	8	17	11:21	星期四

鹤酒的空间

最近想实现vue的一种响应式界面，但是在寻找一种完美的方案，这里也有找到BS【bootstrap】，但是我发现他不是很完美的支持vue3与npm方式随意找了一个vite的解决方案

Vite官网

Tailwind CSS官网

创建一个Vite项目

# 这里我只用了pnpm创建项目
pnpm create vite
cd [到项目中]
pnpm install

# 这是官方实例
npm create vite@latest my-project -- --template vue
cd my-project

安装 Tailwind CSS的依赖

# 这里可以看出Tailwind CSS两个工具 postcss autoprefixer 有兴趣可以看看
npm install -D tailwindcss postcss autoprefixer
# 使用该命令生成tailwind.config.js配置文件
npx tailwindcss init -p

配置tailwind.config.js文件

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

配置tailwindcss的样式文件

在./src/style.css目录下创建style.css文件

@tailwind base;
@tailwind components;
@tailwind utilities;

创建一个tailwindcss vue的示例代码

以上就是tailwindcss 的安装了，下期见！

鹤酒前端会持续更新，精彩内容。