Bulma和 Tailwind功能比较

Bulma 和 Tailwind 比较

Bulma

Bulma is a free, open source CSS framework built primarily with Sass and a Flexbox system. It offers modular columns for easy development and comes with an awesome predefined color palette to provide an ample number of design options. These colors can be used with Bulma’s rich classes for rapid UI development.

Bulma 是一个免费的开源 CSS 框架，主要使用 Sass 和 Flexbox 系统构建。它提供了模块化的colum系统，便于开发，并带有一个预定义调色板，以提供大量的设计选择。这些颜色可以与 Bulma 的class一起使用，以实现快速 UI 开发。

Tailwind

Tailwind is an increasingly popular free, utility-first framework for user interface development. From its 2017 initial release as a side project, it rapidly gained popularity becoming the most widely used utility-first CSS framework for rapid development.
Tailwind may be used to create highly customized, elegant user interfaces without writing custom CSS. This framework is well documented with new additions made each year.

Tailwind 是一个流行的免费用户界面开发框架。从 2017 年作为side project的初始版本开始，迅速流行起来，成为用于快速开发的最广泛使用的实用程序优先 CSS 框架。Tailwind 可用于创建高度自定义、优雅的用户界面，而无需编写CSS。

比较

Bulma和Tailwind都是CSS框架，Bulma在设计理念上更像Bootstrap,提供了一些内置的组件，但和Bootstrap不同的是，Bulma只使用了CSS而没有用到JavaScript; 而Bootstrap是依赖于JavaScript，并且印象中需要jQuery作为内置的选择器实现。

Tailwind和Bulma类似，但设计逻辑不同，Tailwind专注于帮助开发者设计自己的组件，而非使用内置组件。

简单使用

Bulma安装

Bluma的安装使用主要有两种方法，一种是使用.sass文件，另一种是使用已经编译的.css文件

使用.sass文件时

npm install bulma

使用.css文件时,用已经CDN分发的版本

官方的一个例子:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello Bulma!</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
  </head>
  <body>
  <section class="section">
    <div class="container">
      <h1 class="title">
        Hello World
      </h1>
      <p class="subtitle">
        My first website with <strong>Bulma</strong>!
      </p>
    </div>
  </section>
  </body>
</html>

Tailwind安装

Tailwind有自己的CLI,安装相对繁琐一些,首先用npm进行安装

npm install -D tailwindcss
npx tailwindcss init

随后需要进行配置,文件 tailwind.config.js

module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

在css中添加Tailwind 命令

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

用Tailwind实时处理css

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

最后是在html中使用css输出

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="/dist/output.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>