likes
comments
collection
share

TailWind CSS分享体验

作者站长头像
站长
· 阅读数 65

一、了解

  • Tailwind CSS 是一套实用型的 CSS 框架，它不像其他的 CSS 框架一样提供了一些预定义的类来实现常用样式，而是提供了一组可以组合的原子类，可以通过组合这些原子类来定义样式。这些原子类都是非常小的样式类，它们只定义了一个具体的样式细节，例如背景色、文本颜色、字体大小、宽度、高度等。通过将它们组合在一起，可以快速而灵活地创建出各种不同的样式。

  • Tailwind CSS 的原子类按照命名规则分类，例如字体大小类是以 "text-" 开头的，背景色类是以 "bg-" 开头的。该框架也提供了一些实用工具来简化样式的编写，例如间距类、定位类等。通过使用 Tailwind CSS，可以快速构建出高效、优雅的页面和用户界面。

特点

    1. 强调实用性：Tailwind CSS 践行的是实用主义的设计理念，没有花哨的样式，只提供了最基础、最常用的样式，让用户根据自己的需求来组合使用样式。
    1. 原子类：Tailwind CSS 将样式切分为非常小的原子类，这些原子类只控制单个样式的属性，例如字体大小、颜色等，这种方式可以让组合样式更为灵活且易于管理。
    1. 可定制性：虽然 Tailwind CSS 提供了大量的样式组合，但它仍具有高度的可定制性，可以通过配置文件来修改默认样式，强化应用的视觉效果。
    1. 响应式设计：Tailwind CSS 支持响应式设计，可以针对不同屏幕尺寸提供不同的布局、样式和交互效果。
    1. 简单易学：Tailwind CSS 不需要开发者具备过多的 CSS 知识，只要了解基本的 HTML 和 CSS 就可以开始使用它来开发应用。

综上，Tailwind CSS 是一款实用、灵活、易于定制、支持响应式设计的 CSS 框架，是构建高效、现代且易于维护的 Web 应用的理想选择。

应用场景

Tailwind CSS 可以用于各种类型的 Web 应用开发，无论是开发自行维护的网站，还是作为 UI 组件库、前端框架，都是非常适合的。以下是 Tailwind CSS 的一些应用场景：

  1. 快速开发原型：Tailwind CSS 提供了大量的样式原子类，可以快速构建出漂亮且具有效果的原型。
  2. 用于大型 Web 应用：Tailwind CSS 的设计理念可以使开发者更快地开发出易于维护的 CSS 代码。同时，它强调样式的规律性，可以防止样式的重复定义，提高代码的可读性和易维护性。
  3. 与其他框架或库集成：Tailwind CSS 可以与其他框架或库集成，例如 React、Vue、Angular，以及其他的 CSS 框架，例如 Bootstrap。在不同的应用中，它可以作为一种简洁的样式定制解决方案。
  4. 移动应用开发：Tailwind CSS 的响应式设计可以轻松的应用到移动应用中，开发人员可以根据不同屏幕尺寸来确定相应的样式，提高移动应用的适应性。

总之，Tailwind CSS 是一款灵活且易于扩展的 CSS 框架，广泛适用于不同类型的 Web 应用开发，并且可以满足各种前端开发场景的需求。

基本使用方法和语法规则

（在项目中应用tailwind css，见下面第二个模块）

Tailwind CSS 是一种实用且强大的 CSS 框架，它提供了一些预设的样式类，可以让开发者快速地构建出美观的 UI 界面。下面是 Tailwind CSS 的基本使用方法和语法规则：

  1. 样式类结构：Tailwind CSS 的样式类采用以 类别-属性-值 的结构命名，例如 .bg-blue-500 表示背景色为蓝色（blue），并且其颜色值为 500，类别为 bg（背景）。

  2. 属性值的命名规则：在 Tailwind CSS 中，属性值分为数值、颜色和布尔值三种类型。数值采用数字表示，例如 w-20 表示宽度为 20 像素；颜色采用单词或十六进制颜色值表示，例如 bg-red-500 表示红色背景（颜色值为 #EF4444）；布尔值则采用 true 或 false 表示，例如 hidden 表示隐藏元素。

  3. 基础样式类：在 Tailwind CSS 中，有一些基础样式类用于一些常用的样式调整，例如：

    • .w-10 表示元素的宽度；
    • .text-xl 表示字体大小
    • .mx-auto 表示水平居中；
    • .text-center 表示文本水平居中；
    • .text-red-500 表示字体颜色

  4. 响应式样式类：在 Tailwind CSS 中，有一些响应式样式类，用于在不同的屏幕尺寸下显示不同的样式。这些样式类命名规则为 {屏幕尺寸}:{属性}-{属性值}，例如 text-center sm:text-left 表示在小屏幕尺寸下文本左对齐，在大屏幕尺寸下文本居中。

  5. 链接样式类：在 Tailwind CSS 中，有一些链接样式，用于美化页面中的链接效果，例如：

    • .underline 表示下划线；
    • .no-underline 表示去掉下划线；
    • .hover:underline 表示鼠标悬停时出现下划线；
    • .hover:text-red-500 表示鼠标悬停时文本变为红色；

  6. 其他常用样式类：在 Tailwind CSS 中，还提供了许多其他常用样式类，例如：

    • .rounded 表示圆角；
    • .shadow 表示阴影；
    • .bg-gradient-to-r 表示背景渐变。

通过以上的基本使用方法和语法规则，可以让您更加熟悉和了解 Tailwind CSS 的使用，从而更加高效地使用这个强大的 CSS 框架。

实用技巧

Tailwind CSS 是一个快速、高效且高度可定制的 CSS 框架，它使用一组预定义类来快速构建 UI。以下是一些实用技巧，帮助您更好地利用 Tailwind CSS：

  1. 自定义颜色：在 tailwind.config.js 文件中，可以使用 theme 属性自定义颜色，这个属性包含一个颜色对象，您可以并据此为您的项目定义新的颜色。

  2. 响应式设计：Tailwind 提供了一系列响应式类，让您可以根据不同的屏幕尺寸为不同的设备定制 UI，例如：sm，md，lg等。

  3. 定制样式：Tailwind CSS 提供了许多原始的类，您可以轻松地将它们组合在一起创造出自定义样式的组合。

    1. 组合实用类：通常情况下，您可以通过多个实用类的组合来实现所需样式。例如，要在元素上添加40个像素的上边距和底边距，您可以将 pt-10（上边距为10） 和 pb-10（底边距为10）两个实用类组合在一个元素上，即 class="pt-10 pb-10" 。

    2. 扩展现有实用类：您还可以通过添加前缀或后缀来扩展现有的实用类。例如，要创建一个自定义的 bg-opacity-90 类，即给背景添加90％的不透明度，只需将 bg-opacity-90 类添加到 bg-blue-500（蓝色背景）的后面，即 class="bg-blue-500 bg-opacity-90"。

    3. 使用 @apply 来扩展样式：该功能允许您将多个实用类组合成自定义样式，然后将其应用于一个元素。例如，您可以创建一个自定义的 font-bold-uppercase 类，然后使用 @apply 将 font-bold uppercase 两个类组合在一起：

    .font-bold-uppercase {
  @apply font-bold uppercase;
}

    然后，可以应用该 font-bold-uppercase 类到一个元素中：class="font-bold-uppercase"。

  4. 文本样式：Tailwind CSS 提供了一些实用的类，可以快速设置文本的样式，例如： text-center（居中对齐文本）、text-2xl（增加文本大小）。

  5. 构建网格系统：您可以利用 Tailwind CSS 来构建网格系统，这使得在项目中创建布局变得更加容易。利用网格系统类将组件和元素对池进行行和列的多样化排列，能让您快速定位到您需要的布局。

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> 
    <div class="bg-gray-200 p-4">Col 1</div> 
    <div class="bg-gray-200 p-4">Col 2</div> 
    <div class="bg-gray-200 p-4">Col 3</div> 
</div>

  6. 定位元素：Tailwind 提供了各种定位元素的类，包括 z-index、position、top、right、bottom、left 等等，使您轻松定位元素的位置和层级。

  7. 缩放图像：利用 Tailwind CSS，您可以轻松地在UI中缩放图像，只需使用 w-和 h- 后缀来指定图像的宽高。

Tailwind css与其他css框架的差异比较

Tailwind CSS 与其他 CSS 框架相比有着独特的设计理念和使用方式，下面是一些与其他框架的主要差异和比较：

  1. 设计与使用方式：
    • Tailwind CSS 的设计是通过提供广泛的可定制类来构建 UI，而其他框架则会提供一些封装好的组件和样式，开发者只需要在自己的项目中使用这些组件即可。使用 Tailwind CSS 需要开发者花费更多的时间来设计和构建界面，但这种方法有助于实现高度定制的 UI。
  2. 零碎的类名：
    • Tailwind CSS 的特点是提供了大量的类名，因此在开发中，经常会看到很多零散的、单一作用的类名，为了直观，一些人会把它们分成多行，其中每一行针对同一个部分的多个类名，而其他框架则会提供更少、更具有语义性的类名。
  3. 不需要其他 CSS 库：
    • Tailwind CSS 本身就是一个完整的 CSS 框架，不需要额外依赖任何其他的 CSS 库或框架。其他框架可能会依赖于 Bootstrap 或 Foundation 等其他库来扩展它们的功能。
  4. 可定制性：
    • Tailwind CSS 的一个优势就是它的高度可定制性。通过修改配置文件，开发者可以更改颜色、字体、间距、大小和其他样式属性。其他框架也提供了类似的配置选项，但它们的范围通常更小。
  5. 面向全能开发者：
    • Tailwind CSS 是为全能开发者打造的，对于那些只关心界面的设计人员而言，并不是一个友好的工具。其他框架会更加迎合广大用户的需求，对于那些科班出身的网页设计人员，使用 Bootstrap 可能更容易上手。

总之，Tailwind CSS 是与其他 CSS 框架有充分差异和比较的一个框架。通过提供一个类池子，它可以实现高度定制的 UI，这是其他框架不能匹敌的。

二、项目应用

vue2 + tailwind css

blog.csdn.net/vx_10971223…

vue create myapp

  1. 安装tailwindcss:

    npm install tailwindcss
//或
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

  2. 生成配置文件tailwind.config.js、postcss.config.js:

    注意：需要有-p，否则只会生成tailwind.config.js

    npx tailwindcss init -p

    /** @type {import('tailwindcss').Config} */
module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

    // postcss.config.js
// 在构建过程中对 CSS 进行处理, 生成实际的 CSS，在使用 `npm run build` 命令时会被自动执行。这样在开发过程中我们只需要专注于编写 CSS 样式，而不需要手动添加前缀或者担心浏览器兼容性问题。
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {}, // 自动添加 CSS 前缀的插件
  },
}

  3. 在该配置文件中，指定需要的自定义颜色、字体、行高等内容，例如：

    // tailwind.config.js

module.exports = {
  theme: {
    extend: {
      colors: {
        'mycolor': '#abcdef',
      }
    }
  }
}

  4. 新建一个css文件，在其中引入TailWind：

     @tailwind base; //重置默认属性
 @tailwind components; //一些组件样式
 @tailwind utilities; //工具类，也就是最常用的样式封装

  5. 在main.js中导入css文件

    import Vue from 'vue'
import App from './App.vue'
import './index.css'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

  6. 现在可以在Vue组件中使用Tailwind CSS的类了，例如：

    <template>
  <h1 class="font-semibold text-4xl text-mycolor">{{ msg }}</h1>
</template>

    demo

    TailWind CSS分享体验

vue3 + tailwind css

  1. 创建 vite + vue-ts 项目：
yarn create vite

2. 安装 Tailwind CSS 依赖：

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

3. 生成 tailwind 和 postcss 配置文件：

npx tailwindcss init -p

/** @type {import('tailwindcss').Config} */ 
module.exports = { 
    content: [ "./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}", ], 
    darkMode: 'media', 
    theme: { 
        extend: {}, 
        container: { center: true, } 
    }, 
    // 配置插件
    plugins: [], 
}

4. 在全局样式文件中导入tailwind

// src\styles\index.css
@tailwind base; 
@tailwind components;
@tailwind utilities;

// src\styles\index.scss
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

5. 全局样式文件在main.ts中导入：

import { createApp } from 'vue' 
import App from './App.vue' 

// 导入全局样式文件 
import './styles/index.scss'
createApp(App).mount('#app')

demo

<!-- 设置flex布局、交叉轴对齐方式、背景色、圆角、阴影、内边距、子元素间距、最大宽度、水平居中 -->
    <div class="flex items-center bg-white rounded-xl shadow-md p-6 space-x-4 max-w-sm mx-auto">
        <!-- flex布局时禁止收缩 -->
        <div class="flex-shrink-0">
            <!-- 设置图像的宽度、高度 -->
            <img class="w-12 h-12" src="../assets/logo.png" alt="" />
        </div>
        <!-- flex布局时禁止收缩 -->
        <div class="flex-shrink-0">
            <!-- 设置字体大小、字体加粗500、颜色 -->
            <div class="text-xl font-medium text-black">ChitChat</div>
            <!-- 设置字体颜色 -->
            <p class="text-gray-500">You have a new messaeg!</p>
        </div>
    </div>

TailWind CSS分享体验

react + tailwind css

npx create-react-app react-tailwind

  1. 首先使用npm安装tailwindcss:

    npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

  2. 创建一个tailwind.config.js的配置文件:

    npx tailwindcss init -p

  3. 在该配置文件中，指定需要的自定义颜色、字体、行高等内容，例如：

    /** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js, jsx, ts, tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

  4. 打开index.css，并替换成如下内容：

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

  5. 在React项目的App.js文件或其他需要引用的组件中引入tailwindcss的样式，并使用相应的类来样式化组件，例如：

    import React from 'react';
import './App.css';

function App() {
  return (
    <div className="bg-mycolor text-white p-4">
      <h1 className="text-2xl">Hello, Tailwind CSS!</h1>
    </div>
  );
}

export default App;

三、优势

  • 灵活，高度定制化
  • 最终 CSS Bundle 极小，加快渲染速度
  • 极大减少命名心智负担（类似于行内样式，因为减少了 CSS Selector 这一胶水层）
  • 可以节省很多设计方面的心智负担（快速炫页面，也可以联系到官方所说的，让你的开发不必离开 HTML）

四、劣势

  • 内容样式强耦合，后期维护方面或存在压力
  • 学习成本。Tailwind CSS 本身可以理解为一种推陈出新，若未领略过 Bootstrap 时代的风采，需要记忆的点颇多（但官方有推 VSC 插件）
  • Class 串稍长 （可以通过 @apply 应对，但这种复合、叠加的方式，会生成新的类，增大最终 CSS 体积，这与 Tailwind CSS 本身的设计哲学相左，不建议优先使用。）

Tailwind CSS 尤其适用于一些需要高度定制化的场景，譬如 组件库、门户、博客网站等等。不建议老项目中途迁移到 Tailwind CSS，那将是一场灾难（兼容性、侵入性）。

五、插件

  1. Tailwind CSS IntelliSense支持自动完成、语法高亮、悬停预览、语法分析功能。

    注意：它只有在类名前加空格时才起作用

  2. PostCSS Language Support支持css未知规则如tailwind中的 @tailwind、@apply、@screen。

推荐

nerdcave.com/tailwind-ch…

六、Tailwind CSS 高级用法

  • 1、JIT模式：它可以在编译时自动去除未使用的CSS样式，大大减少了CSS文件的大小。

    • 只需要在tailwind.config.js文件中设置mode为'jit'即可
    // tailwind.config.js 
module.exports = { 
    mode: 'jit',
    // 其他配置... 
}

    在使用JIT模式时，你可以在Tailwind CSS的配置文件中配置mode选项为jit，然后在CLI中使用--watch或--build命令来编译CSS文件。例如，下面的命令可以启动一个监视器，实时编译CSS文件：

        npx tailwindcss -i input.css -o output.css --watch --jit

    需要注意的是，JIT模式只适合在生产环境中使用，因为它会在运行时动态生成样式，会带来一定的性能损耗。在开发环境中，建议使用普通模式（mode选项为aot）来编译CSS文件。

    • 在最新版本的tailwind css中，安装Tailwind CSS时默认启用

  • 2、动态类名：可以根据变量或状态来动态生成CSS类，如：hover、active、group-hover、focus等

  • 3、自定义配置：Tailwind CSS提供了一个配置文件，可以通过修改它来自定义样式。如：修改默认颜色、修改字体、添加自定义类等。 // tailwind.config.js module.exports = { theme: { extend: { colors: { 'myColor': '#FF3E4D', }, }, }, // 其他配置... }

  • 4、插件扩展：Tailwind CSS可以通过插件扩展来增加更多的样式，例如：添加新的颜色、添加自定义的组件等。

    • 安装插件
    npm install @tailwindcss/forms
    • 在tailwind.config.js文件中启用插件
    // tailwind.config.js 
module.exports = {
    plugins: [
        require('@tailwindcss/forms'),
    ], 
    // 其他配置... 
}
    • 使用
    <div class=" form-select">111</div>

  • 5、组合类名：Tailwind CSS可以通过组合类名来实现更复杂的样式组合，例如：bg-red-500 hover:bg-green-500。

<template> 
    <div class="bg-red-500 hover:bg-green-500"> 
        Hover me 
    </div> 
</template>

注意： Tailwind CSS 的高级特性虽然提供了很多自定义和灵活的选项，但是在日常使用中我们并不需要经常使用这些高级用法，因为这样会使代码变得复杂和难以维护。以下是一些关于Tailwind CSS高级用法使用的注意事项：

  1. 过度使用自定义样式会让代码变得难以维护，建议尽可能使用Tailwind CSS默认样式，避免重新定义样式。
  2. 使用组合类的数量应该尽可能少，因为在实际开发中会有大量的类名组合，如果类名过多，将会增加代码量，并使代码阅读和维护变得困难。
  3. Tailwind CSS 的高级用法可能涉及到一些复杂的算法和逻辑，这些特性不容易理解和掌握，容易在使用时产生错误。
  4. 在某些情况下，使用高级特性可能会使性能变慢，因为这些特性复杂性较高，消耗的计算资源也会比较多，会减缓网页渲染速度。

综上所述，虽然Tailwind CSS的高级用法提供了更多自定义和灵活的选项，但在日常使用中，我们应该尽可能避免使用这些高级用法，以保持代码的简洁性和易维护性。

七、Tailwind CSS 兼容组件库

Tailwind CSS 是一个纯 CSS 框架，可以和任何前端组件库一起使用，没有兼容问题。 只需在 HTML 或 Vue 组件中，为元素添加相应的 Tailwind CSS 类，就可以实现样式的定制。

<template> 
    <el-button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
        Click me 
    </el-button>
</template>

八、总结

  • tailwind css是一个低level，可定制化的CSS框架；它的最大特点是功能类(utility classes)优先。

  • 有着强大的文档，插件和生态系统。基于tailwindcss的能力与约束，可以开发自己的组件、页面样式。

  • 解决了写类后的代码重复，复杂了类的选定

  • 刚使用Tailwind CSS时会不适应，但是当我们在开发一些无法使用UI库的项目时要编写大量css文件，还得考虑响应式布局，黑暗模式等等，但是使用TailwindCSS的话将非常简单。

转载自:https://juejin.cn/post/7252712159562547258
评论
请登录