Tailwind CSS从零开始

🔮 欢迎点赞 👍٩( ´︶` )( ´︶` )۶ 收藏 🌟留言 💌 欢迎讨论！💕
🔮 本文由 【第四人称Alice】 原创，首发于 优快云 ✨✨✨
🌍 由于博主还属于前期的前端开发小白，欢迎大家留言提出更好的意见，大家共同进步！💭

声明：博主的项目是vue3+ts，node版本18.18.2 

一、前言

1、概述

        Tailwind CSS 是一个高度可定制的实用程序优先的 CSS 框架，它的设计目标是帮助开发者快速构建自定义的用户界面。不同于传统的 CSS 框架，如 Bootstrap 和 Bulma，这些通常提供预定义的组件和样式，Tailwind 提供了一套基础的 CSS 类，允许开发者通过组合这些类来创建所需的样式，而不是依赖预定义的 UI 元素。

2、特点以及优缺点

2.1 Tailwind CSS 的特点主要包括：

①实用程序类：提供大量预定义的 CSS 类，用于快速设置样式，如颜色、字体、间距等。

②高度可定制：允许通过配置文件(tailwind.config.js)定制颜色、间距、字体等。

③原子化设计：类是原子的，可以组合使用以构建复杂的设计。

④Just-in-Time (JIT) 编译：JIT模式只包含在项目中实际使用的样式，减少生产环境的 CSS 大小。

⑤响应式设计：内置断点支持，可以方便地创建响应式布局。

⑥低耦合：鼓励通过类组合而不是内联样式或 CSS 文件，降低样式之间的依赖。

⑦可组合性：类可以自由组合，使得代码更加灵活。

⑧可扩展性：可以通过插件系统添加自定义的实用程序类。

2.2 Tailwind CSS 的优点：

①提高开发速度：快速原型制作，不需要编写大量自定义 CSS。

②代码量减少：通过组合类，可以减少冗余的 CSS 代码。

③一致性：在整个项目中保持一致的样式。

④易于维护：由于类是独立的，更改样式通常影响较小的范围。

⑤适应性强：适合动态生成的 HTML，如 CMS 或服务器端渲染。

2.3 Tailwind CSS 的缺点：

①HTML 中的类名较多：可能导致 HTML 标签变得较长，影响可读性。

②学习曲线：需要熟悉大量的类名，特别是对于新用户。

③样式冲突：如果没有良好的命名约定，可能会导致样式冲突。

④生产环境匹配：配置变化可能需要在开发和生产环境中保持一致，否则可能导致样式问题。

⑤不适合所有项目：对于一些需要高度视觉设计的项目，可能不够灵活，可能需要额外的 CSS。

⑥浏览器兼容性：默认配置可能不包括所有浏览器的兼容性，需要额外关注。

 2.4 总结

总体而言，如果你的项目强调快速迭代、简洁的代码和高度可定制性，Tailwind CSS 可能是一个好选择。但是，如果你追求更复杂的设计或需要更高的代码可读性，可能需要权衡其他选项。建议在开始项目之前评估这些因素，以确定最符合项目需求的解决方案。

2.5 官网地址

中文官网地址：Install Tailwind CSS with Vite - Tailwind CSS 中文网

英文官网地址：Installation - Tailwind CSS

二、项目中使用

1、安装和配置

1.1 安装TailwindCSS

npm install -D tailwindcss

1.2 初始化配置文件

npx tailwindcss init

执行命令后会自动生成tailwind.config.js文件

1.3 配置模版文件路径

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
    //匹配 index.html以及src 目录下的所有 Vue、JavaScript、TypeScript、JSX 和 TSX 文件。
    content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
    theme: {
        extend: {},
    },
    plugins: [],
};

1.4 将 Tailwind 添加到你的 PostCSS 配置中

npm install -D postcss autoprefixer

创建postcss.config.cjs文件（在我创建为.js文件时发现报错，最后改为.cjs文件解决报错问题）

postcss.config.cjs

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

1.5 将 Tailwind 指令添加到你的 CSS

将每个 Tailwind 层的 @tailwind 指令添加到你的主 CSS 文件中。

/src/styles/index.css

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

1.6 注入到main.ts文件中

main.ts

import './tailwindcss/index.css'

2、 安装编辑器智能提示插件支持

在应用商店搜索 “Tailwind CSS IntelliSense” 进行安装

3、组件中使用

此处做了一个弹性居中并设置了宽高、背景色、字体颜色以及字体大小的示例

<template>
    <div class="flex flex-col">
        <div class="w-2/3 h-36 bg-slate-500 flex justify-center place-self-center my-5">
            <div>
                <img src="/vite.svg" class="logo" alt="Vite logo" />
                <p class="text-red-100 text-lg underline place-self-center">App.vue</p>
            </div>
        </div>
    </div>
</template>

4、运行及效果展示

npm run dev

快速入门可以参考这个博主，基础布局的相关属性已经介绍详细，便于大家快速上手Tailwind CSS入门教程_tailwind css教程-优快云博客