likes
comments
collection
share

重新定义现代前端开发的设计系统！Tailwind CSS 终极指南

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

引言

前端CSS方案通常包括：CSS Modules、BEM、CSS in JS以及原子化CSS。原子化CSS是一种 CSS 架构方法，以小型的、单一用途的类为主来编写样式。

Tailwind CSS是基于原子化CSS的架构方式，提供了大量预设的工具类，我们可以直接使用这些定义好的类构建用户界面。

CSS样式表：

.app{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
}
.box{
  border-radius: 10px;
  width: 100px;
  height: 100px;
  background: #000;
}

<div class='app'>
  <div class='box'></div>
</div>

Tailwind原子化CSS：

<div class='flex justify-center items-center h-screen w-screen'>
  <div class='w-24 h-24 bg-zinc-950 rounded-lg'></div>
</div>

使用方式

Tailwind CSS是PostCSS的一个插件。可以单独使用，也可以作为PostCSS插件一起使用。

  • 如果你是想直接在html文件中使用，则可以单独使用，这是最简单、最快的使用方法。
  • 如果你使用前端框架如Vue、React构建项目，则建议你将其作为PostCSS插件使用，它是将其与 Webpack、Rollup、Vite 和 Parcel 等构建工具集成的最无缝方式。

单独使用

安装 tailwindcss，然后初始化 tailwind.config.js 配置文件。

npm install -D tailwindcss
npx tailwindcss init

在 tailwind.config.js 配置文件中添加所有模板文件的路径，包含你使用Tailwind的所有html文件。

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

在你的css入口文件input.css中通过 @tailwind 指令添加每一个 Tailwind 功能模块。

@tailwind base;
@tailwind components;
@tailwind utilities;
  • base会注入Tailwind的基本样式，包括一些基本的 HTML 元素样式、重置元素默认样式等。
  • components会注入Tailwind的组件类，包括预定义的按钮、表格、表单、卡片等组件样式。
  • utilities会注入Tailwind的实用程序类，这些类通常用于添加与布局、间距、响应式设计等相关的样式，使得可以快速构建出复杂的页面。

编译及使用

将input.css中注入的Tailwind所有样式类编译到输出文件output.css，然后在html文件中引入，之后就可以在html中使用Tailwind 的工具类为你的内容设置样式。

npx tailwindcss -i ./src/input.css -o ./src/output.css --watch

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="./output.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    小新学研社 Tailwind Css
  </h1>
</body>
</html>

压缩css，实现尽可能小的生产构建

npx tailwindcss -o ./src/output.css --minify

作为PostCSS插件

这里以React + Vite项目为例介绍Tailwind CSS的集成，Vue项目使用方式相同。

安装tailwindcss、 postcss、autoprefixer，并初始化 tailwind.config.js 配置文件。

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

将 tailwindcss 和 autoprefixer 添加到postcss.config.js文件中

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

配置模板文件的路径

content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],

在入口文件中注入样式类，可以使用指令的方式，或者直接导入依赖包下的css文件。

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

/* or */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

之后直接在组件中编写样式类，运行项目即可生效。

<div className='flex justify-center items-center w-48 h-24 border-2 rounded-lg'> 哈哈哈 </div>

重新定义现代前端开发的设计系统！Tailwind CSS 终极指南

编辑器支持

Tailwind 使用了大量自定义 CSS 规则，如 @tailwind、@apply，如果不做处理，在许多编辑器可能会触发警告或错误，这些规则无法识别。

以VS Code为例，使用官方 Tailwind CSS IntelliSense插件包含一个专用的Tailwind CSS语言模式，该模式支持所有自定义规则和函数。

重新定义现代前端开发的设计系统！Tailwind CSS 终极指南

安装过后编写Tailwind语法提示：

重新定义现代前端开发的设计系统！Tailwind CSS 终极指南

定制theme

tailwind.config.js中theme字段用于定义项目的样式主题，包括屏幕、颜色、字体、间距等样式属性，这里设置的是整个项目的基本样式配置。这些配置将作为默认值，用于生成 Tailwind CSS 的工具类。

重新设置颜色样式类：

content: [ ... ],
theme: {
  colors: {
    blue: "#1fb6ff",
    pink: "#ff49db",
  },
},

注意：Tailwind默认预设的有很多颜色样式类，如下展示：

重新定义现代前端开发的设计系统！Tailwind CSS 终极指南

如果将theme下的colors字段重新设置，表示默认颜色样式类只包含blue和pink，之前的默认颜色样式类均无法使用：

重新定义现代前端开发的设计系统！Tailwind CSS 终极指南

如果不是有意为之你可以使用extend字段。

extend 字段是 theme 字段下的一个特殊字段，它允许你 扩展 或 覆盖 theme 字段中定义的默认样式属性。

theme: {
  extend: {
    colors: {
      customColor: "red", //新增customColor颜色类
      pink: 'black' //覆盖默认pink
    },
    fontFamily: {
      sans: ["sans-serif"], //覆盖默认sans
      eb: ["Eb Garamond"], //新增 font-eb 字体类
    },
  },
},

这样做不会影响原有样式类，只是在此基础上扩展或覆盖。

如果你对样式尺寸不满意，也可以使用同样方式设置或者覆盖默认值：

theme: {
  extend: {
    // 修改w-1样式类尺寸，添加新值w-calc_1
    width: {
      1: "20px",
      calc_1: "calc(100% - 60px)",
    },
  },
},

重新定义现代前端开发的设计系统！Tailwind CSS 终极指南

你可以在theme字段中根据你项目需求自定义主题样式类。

特殊属性

选择器

伪类选择器：hover、focus、active、visited

伪元素选择器：first-child、last-child等

. . .

<div className="flex justify-center items-center h-screen w-screen">
  {/* hover */}
  <div className="flex justify-center items-center w-48 h-24 border-2 rounded-lg hover:bg-red-700">
    小新
  </div>

  <ul>
    {[1, 2, 3, 4].map(e => {
      return (
        // first-child
        <li className="first:bg-black w-48" key={e}>
          {e}
        </li>
      );
    })}
  </ul>
</div>

重新定义现代前端开发的设计系统！Tailwind CSS 终极指南

响应式断点

默认的响应式断点包含sm、md、lg、xl、2xl，你可以根据项目需要在theme中定制。

screens: {
  sm: "640px",
  md: "768px",
  lg: "1024px",
  xl: "1280px",
  "2xl": "1536px",
},

使用：

// bg-black md:bg-red-700 sm:bg-amber-400
<div className="flex justify-center items-center w-screen h-24 bg-black md:bg-red-700 sm:bg-amber-400">
  小新
</div>

重新定义现代前端开发的设计系统！Tailwind CSS 终极指南

重用样式

<div className="mt-3 flex -space-x-2 overflow-hidden">
  <img className="w-44 py-2 px-5 bg-violet-500 text-white font-semibold rounded-full shadow-md hover:bg-violet-700" src='./1.png' />
  <img className="w-44 py-2 px-5 bg-violet-500 text-white font-semibold rounded-full shadow-md hover:bg-violet-700" src='./2.png' />
  <img className="w-44 py-2 px-5 bg-violet-500 text-white font-semibold rounded-full shadow-md hover:bg-violet-700" src='./3.png' />
  <img className="w-44 py-2 px-5 bg-violet-500 text-white font-semibold rounded-full shadow-md hover:bg-violet-700" src='./4.png' />
  <img className="w-44 py-2 px-5 bg-violet-500 text-white font-semibold rounded-full shadow-md hover:bg-violet-700" src='./5.png' />
</div>

这些img标签拥有同样的样式类，可以使用@apply 提取类：

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

@layer components {
  .re-image {
    @apply w-44 py-2 px-5 bg-violet-500 text-white font-semibold rounded-full shadow-md hover:bg-violet-700;
  }      
}

之后使用re-image样式类即可

<div className="mt-3 flex -space-x-2 overflow-hidden">
  <img className="re-image" src='./1.png' />
  <img className="re-image" src='./2.png' />
  <img className="re-image" src='./3.png' />
  <img className="re-image" src='./4.png' />
  <img className="re-image" src='./5.png' />
</div>

自定义样式

举一个例子，你需要使用定位top:120px之类的属性，但是没有这种默认样式类，你可以使用自定义样式，使用 Tailwind 的方括号表示法来动态生成一个具有任意值的类。

使用值或CSS变量：

<div class="top-[120px] lg:top-[344px] bg-[#bada55]">
  <!-- ... -->
</div>
<div class="bg-[url('/aaa.png')]">
  <!-- ... -->
</div>

<div class="bg-[--my-color]">
  <!-- ... -->
</div>

写在最后

通过这些基础步骤，你可以快速开始使用 Tailwind CSS，并逐步掌握其核心功能和最佳实践。Tailwind CSS在提高开发速度、定制化和响应式设计方面具有明显优势，使其成为构建企业级应用的一个有吸引力的选择。

感谢您的阅读！

重新定义现代前端开发的设计系统！Tailwind CSS 终极指南

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