TailwindCSS—一个用于实现快速UI开发的实用工具集CSS框架。

原创

开源指北

修改于 2022-12-26 16:04:33

1.7K0

修改于 2022-12-26 16:04:33

文章被收录于专栏：idea插件idea插件

哈喽，大家好，我是指北君。

今天给大家介绍个好东西————TailwindCSS ！

一. 引言

css对于页面的美化作用不言而喻，但是在进行前端布局页面的时候，往往对页面样式的命名不胜其烦。

很多的项目，都是对class语义化命名，简单的页面还可以接受，但是随着项目开发的深入，会出现很多类似的语义化场景，导致命名愈发困难。一边要小心不要命名重复，造成样式冲突，另一边又需要考虑class的复用场景。这也给开发人员带来了不小的困扰。

二、什么是Tailwind CSS

Tailwind是一个原子类方式命名的css工具集。

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

三、Tailwind CSS特点

功能类优先（utility-first）在一组受约束的原始功能类的基础上构建复杂的组件。使用 Tailwind，您可以通过直接在 HTML 中应用预先存在的类来设置元素的样式。这样您没有为了给类命名而浪费精力，css也会减少。
响应式设计 Tailwind 中的每个功能类都可以有条件的应用于不同的断点，这使得您可以轻松的构建复杂的响应式界面而不用离开 HTML。
自定义样式通过自定义功能类来扩展 Tailwind，更加贴合实际业务需求。
其他优点 ● 函数与指令：Tailwind 向您的 CSS 的暴露的函数和指令的参考说明。 ● 悬停、焦点和其它状态：使用功能类为处于悬停、焦点和其它状态的元素设置样式。

四.简单上手(demo)

首先新建一个tailwindcss-demo文件夹，然后输入以下命令：

新建src文件夹-并添加index.html和input.css文件<!DOCTYPE html><html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<!-- 注意这里引入的output.css文件，后面会用到 -->

<link rel="stylesheet" href="/dist/output.css">

</head>

<body>

<h1 class="text-4xl text-green-700 text-center font-semibold">Hello Tailwind</h1>

</body>

</html>

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

初始化package.jsonnpm init
安装taildwindcss以及它的依赖postcss,autoprefixernpm install -D tailwindcss@latest postcss@latest autoprefixer@latest
创建tailwind.config.js和 postcss.config.jsnpx tailwind init -p

5.我们在package.json文件下新增一个script

"build": "postcss css/tailwind.css -o public/output.css"

6.在终端中输入npm run build，项目中就会产生一个含有output.css的public文件夹

7.最后，在浏览器中运行index.html即可

五.vscode 补全插件

vscode 安装补全插件,书写也更加便捷

六、在线编辑器

.还可以在 Tailwind Playground 在线编辑器尝试不同的基础类组合并查看效果

七、使用cdn运行

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Example</title>
    <script src="https://cdn.tailwindcss.com/"></script>
  </head>
  <body>
    <!-- -->
    <figure class="bg-slate-100 rounded-xl p-8 dark:bg-slate-800">
        <img class="w-24 h-24 rounded-full" src="https://tailwindcss.com/_next/static/media/sarah-dayan.a8ff3f1095a58085a82e3bb6aab12eb2.jpg" alt="" width="384" height="512">
        <div class="pt-6 space-y-4">
          <blockquote>
            <p class="text-lg">
              “Tailwind CSS is the only framework that I've seen scale
              on large teams. It’s easy to customize, adapts to any design,
              and the build size is tiny.”
            </p>
          </blockquote>
          <figcaption>
            <div>
              Sarah Dayan
            </div>
            <div>
              Staff Engineer, Algolia
            </div>
          </figcaption>
        </div>
      </figure>
  </body>
</html>

文档地址：https://tailwindcss.com/

中文文档地址：https://www.tailwindcss.cn/