likes
comments
collection
share

浅尝Tailwind CSS

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

一、前言

无意间关注到 Anthony Fu 大佬，真的是做的东西好，人还帅，拍照还好看。

通过Anthony Fu 大佬，首先了解到原子化CSS，觉得可能会契合我司目前正在搭建的前端原子业务能力架构体系，所以浅尝了一下，单纯使用是真香！回归的项目，还是需要多考虑一些场景。

vscode先安装插件TailwindCSS Kit

二、我知道的原子化CSS框架

浅尝Tailwind CSS

无需离开您的HTML，即可快速建立现代网站。

Tailwind CSS 是一个功能类优先的 CSS 框架，它集成了诸如 flex, pt-4, text-center 和 rotate-90 这样的的类，它们能直接在脚本标记语言中组合起来，构建出任何设计。

浅尝Tailwind CSS

Windi CSS 是下一代工具优先的 CSS 框架。

如果你已经熟悉了 Tailwind CSS，可以把 Windi CSS 看作是按需供应的 Tailwind 替代方案，它为你提供了更快的加载体验，完美兼容 Tailwind v2.0，并且拥有很多额外的酷炫功能。

浅尝Tailwind CSS

Instant On-demand Atomic CSS Engine

即时按需原子 CSS 引擎

这一次先尝试Tailwind CSS，后面继续研究其他的框架。

三、Tailwind CSS

创建项目+依赖

pnpm create vite learn-tailwind-css --template vue

pnpm i -D tailwindcss postcss autoprefixer

// 创建配置文件
npx tailwindcss init -p

找到tailwind.config.js配置好content字段：

/** @type {import('tailwindcss').Config} */
export default {
  content: [    './src/**/*.{vue,js,ts,jsx,tsx}'
],
  theme: {
    extend: {},
  },
  plugins: [],
}

找到tailwind.css，增加：

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

找到main.js,引入tailwind.css：

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import './tailwind.css' // focus code

createApp(App).mount('#app')

ok，现在可以用起来了！

使用

// App.vue
<script setup></script>

<template>
  <div class="w-32 h-32 bg-red-500"></div>
</template>

<style scoped></style>

你会看到：

浅尝Tailwind CSS

目前的感受

为啥觉得怪怪的？有一种脱裤子放屁的感觉？

这和写内联样式有区别吗？

  <div style="xxxx"></div>

或者常用的class呢？

  <div class="class-name"></div>
  <style>
  .class-name {
      xxxx
  }
  </style>

Tailwind CSS 解决了什么痛点

这里的讨论建立在代码量大的情况下，俗话说的好，“抛开剂量谈毒性，都是耍流氓”

  1. class 取名问题

这确实是我遇到的痛点，想要语义化一些可能就需要拼写成'select-files-dialog'，单独看没啥问题，如果带入到实际开发中，代码量一上来，一层一层div，这些情况下，类名选取就是负担了

  1. 作用域

有没有遇到过，写了一个样式，比如class取名叫，"title"，然后发现别的组件样式崩了...

又比如，删除了一个组件的class，然后发现别的组件又又崩了...

诚然，现在有scope，有团队内的约定等等限制条件，但是这个问题是存在的。

Tailwind CSS就没有这个问题，因为class与content解耦了，没有关系了。我觉得可以这么理解，如果你设置w-32，那么这个元素就具有宽度32px的样式，w-32，那么这个元素就失去了这个样式。别的组件就不会受到影响，别的组件有那就有，没有那就还没有。

  1. css体积的变化

如果我们写一个组件，那么文件体积是1，如果写100个呢，算上封装、优化等手段还是会有50（我拍脑门猜的）增长。

使用Tailwind CSS，写一个组件，w-32，另外的组件也使用了，那么就只会有一份w-32，换句话说，你用一个增加一个，是线性增长。

  1. 语义化

Tailwind CSS 熟悉时候，维护、编写都会方便许多，语意明确。

  1. 简洁性

这个我觉得仁者见仁了...

  1. 组件化

Atomic CSS 可以与 React、Vue 和 Svelte 等框架很好地集成，因为 Atomic CSS 可以更轻松地创建封装的基于组件的样式。基于组件的框架也解决了重复的问题。你可以使用组件来代替通过 CSS 类来减少重复。事实上，Tailwind 特别推荐将 React 与 Atomic CSS 结合使用。如果你使用像vanilla-extract 的 sprinkles之类的东西，这种集成会得到进一步改进，它在 Atomic CSS 中添加了一个类似于 JS 的接口中的 CSS。

最后

好的，又水了一文，不是，又学了点新东西。Tailwind CSS，不打算深入了，查了一些资料，Windi CSS 和 Unocss可能更香～

后面会继续更新关于Windi CSS 和 Unocss文章，到时见～

酒浆～

欢迎关注我的公众号：王大锤学前端