Tailwind CSS快速入门

孤影_ls

已于 2024-08-22 17:08:53 修改

阅读量2.3k

点赞数 19

分类专栏： CSS 前端企业级项目规范文章标签： css 前端

于 2024-05-24 01:00:03 首次发布

本文链接：https://blog.csdn.net/Sheng_zhenzhen/article/details/139160335

版权

CSS 同时被 2 个专栏收录

14 篇文章

订阅专栏

前端企业级项目规范

8 篇文章

订阅专栏

文章目录

为什么要使用Tailwind CSS

只需书写 HTML 代码，无需书写 CSS，即可快速构建美观的网站

Tailwind CSS 是一个功能类优先的 CSS 框架，它通过提供大量的原子类（utility classes）来帮助开发者快速构建界面。使用 Tailwind CSS 可以极大地提高开发效率，因为它减少了编写传统 CSS 时的重复性和模版代码。

Tailwind CSS 、传统的 CSS 、 CSS-in-JS 区别

CSS 管理方法	设计理念	使用方式	应用场景
Tailwind CSS	预定义实用类、直接应用HTML、快速构建	html直接添加class 类名	ui设计高一致通过预设样式减少重复，例如：管理系统
CSS-in-JS	css与js混合开发，动态变化、组件化	直接创建一个函数写在js中，动态变化	大量动态样式应用
传统的 CSS	样式细节、层叠能力	编写选择器指定元素应用对应样式	高度自定义样式和复杂布局项目，例如：活动页

使用Tailwind CSS的好处

提高开发效率：Tailwind CSS 通过提供大量预设的实用类，让开发者能够快速构建界面，而不需要从头编写大量的 CSS。这可以显著提高开发速度和效率。
响应式设计：Tailwind CSS 内置了响应式设计功能，使得在不同的屏幕尺寸和设备上创建响应式布局变得简单。开发者可以使用如 md:、lg: 等前缀，轻松地为不同设备设置不同的样式。
定制化：Tailwind CSS 允许开发者通过配置文件进行深度定制，包括颜色、字体、间距等，使得整个网站的风格和设计可以保持一致性。
实用性强：Tailwind CSS 的设计哲学是“实用类优先”，这意味着开发者可以直接使用类名来实现样式，而不需要编写单独的样式表。这样可以减少代码的复杂性，并使得代码更加直观和易于维护。
易于维护：由于 Tailwind CSS 使用实用类的方式，所以在维护和更新样式时，通常只需要修改 HTML 文件中的类名，而不必深入到 CSS 文件中，这大大简化了维护工作。
与现代前端框架兼容：Tailwind CSS 可以很好地与 React、Vue、Angular 等现代前端框架和库协同工作，帮助开发者构建现代化的网页应用。
设计系统的一致性：对于需要遵循特定设计系统的项目，Tailwind CSS 提供了一种快速实现这些设计规范的途径，保证了设计的一致性。
不需要浪费精力发明类名，也不用担心修改全局样式

安装

Tailwind CSS 安装

Tailwindcss试用安装

安装 Tailwind CSS

npm install -D tailwindcss
npx tailwindcss init

配置模板文件的路径

tailwind.config.js

 /** @type {import('tailwindcss').Config} */
 module.exports = {
   // 配置模板文件的路径
   content: ["./src/**/*.{html,js}"],
   theme: {
     extend: {},
   },
   plugins: [],
 };
 ______________________________________________________
 /** @type {import('tailwindcss').Config} */
 export default {
   content: ['./src/**/*.{html,js}'],
   theme: {
     extend: {}
   },
   plugins: []
 }

下载Vscode的tailwindcss提示插件
Tailwind CSS IntelliSense
类名快速补全
在 Visual Studio Code 中，设置 “tailwindCSS.emmetCompletions”: true 将启用 Tailwind CSS 的 Emmet 插件集成。
Emmet 是一个用于快速编写 HTML 和 CSS 的工具，它通过缩写语法来扩展成完整的代码。
1. 你可以通过点击左下角的齿轮图标选择“设置”，在设置搜索框中输入tailwindCSS.emmetCompletions找到 Editor: Emmet Completions 的设置，并确保它旁边的复选框被勾选。
2. 如果你想要通过 JSON 文件编辑设置，可以打开 settings.json 文件（可以通过点击设置界面右上角的图标）
  并添加以下配置：
```
{
  "tailwindCSS.emmetCompletions": true,
}
```

效果

快速书写技巧

以下是一些使用 Tailwind CSS 快速书写的技巧：

熟悉类名： Tailwind CSS 的类名是直观的，例如 .text-center 使文本居中，.bg-blue-500 设置背景色为蓝色。熟悉这些类名能帮助你快速构建界面。
使用 @apply 指令：如果你在使用预处理器（如 SASS 或 LESS）或者喜欢在 CSS 文件中定义样式，可以使用 @apply 指令将 Tailwind 的类名应用到你的样式规则中。
```
.btn {
  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
}
```
利用响应式设计： Tailwind CSS 提供了响应式前缀，如 md: 表示在中等屏幕大小及以上时应用该样式。
```
<div class="md:bg-blue-500">
  
</div>
```
使用配置文件定制： Tailwind CSS 允许你通过 tailwind.config.js 文件进行大量定制，包括颜色、字体、间距等。合理配置可以减少不必要的类名，使项目更加整洁。
使用 VS Code 插件：安装 Tailwind CSS 的 VS Code 插件可以提供智能提示和自动补全，进一步加快开发速度。
构建自己的设计系统：如果你的项目有特定的设计要求，可以基于 Tailwind CSS 构建自己的设计系统，定义一套符合项目风格的类名。
利用函数和简写： Tailwind CSS 提供了一些简写方式，比如 p-4 可以同时设置上下左右的外边距。
学习官方文档和社区资源： Tailwind CSS 的官方文档非常完善，社区也有很多资源和教程可以帮助你快速上手和提高。

通过这些方法，你可以更高效地使用 Tailwind CSS，快速构建出既美观又响应式的网页。

扩展原子class

通过 @layer、@apply 或者插件的方式扩展原子 class

html

<!-- Will look like a card, but with square corners -->
<div class="card rounded-none">
  <!-- ... -->
</div>

main.css

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

@layer components {
  .card {
    background-color: theme('colors.white');
    border-radius: theme('borderRadius.lg');
    padding: theme('spacing.6');
    box-shadow: theme('boxShadow.xl');
  }
  /* ... */
}

支持 prefix 来避免 class 名字冲突

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  // ...
  prefix: 'tw-',
}

速查手册

Tailwindcss速查手册

常用tailwind-css

Border Radius
rounded-[4px]
rounded-tl-[5px]
padding
p-[4px]
font-size
font-medium 500
line-height
leading-3
flex
flex flex-col justify-end grow-0 shrink-0
overflow
overflow-y-auto
grid
grid grid-cols-3
pointer
cursor-pointer
width
w-1/3 w-full w-[50%]