TailwindCss 入门学习

css的写法

• 原生写法

• 组件写法 ( 最通用的 )

  • bootstrap uview

• 覆盖式写法

  • !important : 设置css优先级

• 零件化 原子化

  • tailwindcss

vue官网 : https://cn.vuejs.org/

TailwindCSS 官网: 安装 - TailwindCSS中文文档 | TailwindCSS中文网

从0搭建一个vue3 + tailwindcss的项目

要从零开始搭建一个 Vue 3 + Tailwind CSS 项目，可以按照以下步骤操作：

1. 创建一个 Vue 3 项目

首先，需要通过 Vue CLI 或 Vite 初始化一个 Vue 3 项目。Vite 是一个快速的构建工具，非常适合 Vue 3。

使用 Vite 初始化项目

在终端中运行以下命令：

# 1. 创建项目目录并进入该目录
mkdir my-vue-tailwind-project
cd my-vue-tailwind-project
​
# 2. 使用 Vite 创建 Vue 3 项目
npm init vite@latest . -- --template vue
​
# 3. 安装依赖
npm install

2. 安装 Tailwind CSS

在项目根目录中运行以下命令安装 Tailwind CSS 及其相关工具：

npm install -D tailwindcss postcss autoprefixer

接下来，初始化 Tailwind CSS 的配置文件：

npx tailwindcss init -p

此命令将在项目根目录生成两个文件：

• tailwind.config.js：Tailwind 的配置文件

• postcss.config.js：PostCSS 的配置文件

3. 配置 Tailwind CSS

在 tailwind.config.js 文件中，设置 content 选项，指定哪些文件会使用 Tailwind CSS 的类，以便进行 Tree Shaking：(具体情况看个人)

// tailwind.config.js
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

4. 添加 Tailwind CSS 基础样式

在 src 目录下创建一个主样式文件，通常是 src/style.css (具体文件,看个人的环境)，然后添加以下内容来引入 Tailwind 的基础样式：

/* src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

5. 在项目中引入样式文件

打开 src/main.js 文件，确保导入了 index.css 文件：

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'  // 引入 Tailwind CSS 样式文件
​
createApp(App).mount('#app')

6. 运行项目

现在，所有的配置都完成了，可以启动开发服务器来查看效果：

npm run dev

7. 测试 Tailwind CSS

在 App.vue 中，可以添加一些 Tailwind 的类来测试样式是否成功应用：

<template>
  <div class="min-h-screen bg-gray-100 flex items-center justify-center">
    <h1 class="text-4xl font-bold text-blue-600">
      Hello, Vue 3 + Tailwind CSS!
    </h1>
  </div>
</template>

8. 编译和构建

当准备好部署应用时，可以运行以下命令构建生产版本：

npm run build

完成！这样就成功搭建了一个基于 Vue 3 和 Tailwind CSS 的项目。

w-[80px] 这种写法是tailwind的吗?

w-[80px] 是 Tailwind CSS 的一种自定义宽度的写法。它属于 Tailwind CSS 的 Arbitrary Value（任意值）语法，用来设置特定的宽度，而不是使用预定义的宽度类。

示例

• w-[80px]：设置元素宽度为 80px。

• h-[50px]：设置元素高度为 50px。

这种任意值语法很实用，当你需要一个 Tailwind 默认宽度以外的自定义值时，可以直接在方括号里指定具体的值。

示例代码

在组件中可以这样使用：

<template>
  <div class="w-[80px] h-[50px] bg-blue-500 text-white flex items-center justify-center">
    Custom Box
  </div>
</template>

注意事项

• 确保 tailwind.config.js 中的 content 配置指向你的文件，否则 Tailwind 可能不会识别到这些自定义类，从而省略它们。

这样写是wailwind自带的吗?需不需要自己配置文件,或者定义css

w-[80px] 这种写法是 Tailwind CSS 自带的功能，无需额外配置，也不需要手动定义 CSS。它属于 Tailwind CSS 的任意值（Arbitrary Value）语法，默认是支持的。因此，你可以直接在项目中使用这种语法，Tailwind 会自动识别和处理。

tailwind的常用属性

1. 布局（Layout）

• Flexbox 布局

  • flex：将元素设置为弹性布局容器。

  • flex-row / flex-col：水平 / 垂直排列。

  • items-center：垂直居中子项。

  • justify-center：水平居中子项。

  • flex-wrap：自动换行。

• Grid 布局

  • grid：将元素设置为网格容器。

  • grid-cols-3：3 列布局。

  • gap-4：网格之间的间距。

• 定位

  • absolute / relative：绝对 / 相对定位。

  • top-0 / left-0：设置距离顶部或左侧为 0。

  • inset-0：四个方向均为 0，元素将充满容器。

2. 尺寸（Width / Height）

• 宽度：

  • w-full：占满父容器宽度。

  • w-1/2、w-1/3 等：按比例设置宽度。

  • w-16、w-32 等：固定宽度（单位为 4px）。

• 高度：

  • h-screen：高度为视口高度。

  • h-16、h-32 等：固定高度（单位为 4px）。

  • min-h-screen：设置最小高度为视口高度。

3. 间距（Spacing）

• 内边距（Padding）：

  • p-4：所有方向的内边距为 1rem。

  • px-4 / py-4：水平 / 垂直方向的内边距。

• 外边距（Margin）：

  • m-4：所有方向的外边距为 1rem。

  • mx-4 / my-4：水平 / 垂直方向的外边距。

4. 颜色（Colors）

• 背景颜色：

  • bg-blue-500：蓝色背景。

  • bg-gray-200：灰色背景。

• 文本颜色：

  • text-white：白色文本。

  • text-gray-800：深灰色文本。

• 边框颜色：

  • border-gray-400：灰色边框。

  • border-blue-500：蓝色边框。

5. 边框（Borders / Rounded Corners）

• 边框宽度：

  • border：默认宽度的边框。

  • border-2、border-4 等：加粗边框。

• 圆角：

  • rounded：默认小圆角。

  • rounded-full：完全圆形。

  • rounded-lg、rounded-xl 等：较大圆角。

6. 阴影（Shadows）

• 阴影样式

  • shadow：默认小阴影。

  • shadow-md、shadow-lg 等：较大的阴影。

  • shadow-none：移除阴影。

7. 文字排版（Typography）

• 字体大小：

  • text-sm、text-lg、text-xl 等：从小到大的字体。

• 字体粗细：

  • font-thin、font-bold、font-extrabold 等：字体粗细。

• 文本对齐：

  • text-left、text-center、text-right：文本左对齐、居中、右对齐。

8. 背景和透明度（Background & Opacity）

• 背景渐变：

  • bg-gradient-to-r：从左到右的渐变。

  • from-blue-500 to-green-500：蓝色到绿色的渐变。

• 透明度：

  • opacity-50：50% 透明度。

  • opacity-100：不透明。

9. 过渡效果（Transitions & Animations）

• 过渡

  • transition：启用默认的过渡。

  • duration-200、duration-500：过渡持续时间。

• 动画

  • animate-spin：旋转动画。

  • animate-bounce：弹跳动画。

10. 状态伪类（Hover, Focus, Active）

• Hover 状态：

  • hover:bg-blue-500：悬停时背景变蓝。

  • hover:shadow-lg：悬停时添加阴影。

• Focus 状态：

  • focus:border-blue-500：聚焦时边框变蓝。

高度为视口高度是什么意思

高度为视口高度（viewport height）是指元素的高度与当前浏览器窗口（视口）的高度一致。这样设置后，无论页面内容多少，元素的高度都会填满整个屏幕高度，不会因为内容少而显得页面空荡。

在 Tailwind CSS 中，可以使用 h-screen 类来设置元素的高度为视口高度。

视口高度的常见用途

1. 全屏布局：例如，创建一个全屏的横幅（hero section），可以设置 h-screen，这样横幅会填满用户当前的视口高度。

2. 响应式页面布局：当页面的内容较少时，使用视口高度可以确保页面的整体视觉布局完整，不会因为内容少而出现空白。

3. 固定背景：背景高度等于视口高度时，滚动内容时背景可以固定显示在视口中。

示例代码

以下是一个示例，当 div 使用 h-screen 类时，它的高度会与视口的高度一致：

<div class="h-screen bg-blue-500 flex items-center justify-center">
  <p class="text-white text-2xl">这是一个视口高度的块</p>
</div>

在上面的示例中，div 的高度将始终等于视口高度。