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分发的版本

@import "https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css";

官方的一个例子:

<!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/bulma@0.9.4/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>

Bulma和 Tailwind功能比较相关推荐

tailwindcss 官网（六）定制：配置（ `tailwind.config.js `、-p、important、核心插件、`resolveConfig`）、主题 `theme` 配置
tailwindcss 官网(六)定制:配置( tailwind.config.js.-p.important.核心插件.resolveConfig).主题 theme 配置文章目录 tailwin ...
老弟，来了？VUE+Nuxt.js+Koa+Vuex入门教程（一）仿写一个cnode网站
if(有工作){if(工作地址 == "深圳" || 工作地址 == "广州" ){do(请联系作者,qq:1172081598)} } 何为Nuxt.js N ...
tailwindcss 官网（二）生产优化（purge）、浏览器支持、智能感知
tailwindcss 官网(二)生产优化(purge).浏览器支持.智能感知文章目录 tailwindcss 官网(二)生产优化(purge).浏览器支持.智能感知 1. 生产优化概览编写可清 ...
tailwindcss 官网（五）核心概念：添加新的功能类、函数与指令（@tailwind、@apply、!important、@layer、@variants、 theme()）、px、em、rem
tailwindcss 官网(五)核心概念:添加新的功能类.函数与指令(@tailwind.@apply.!important.@layer.@variants.@responsive. theme( ...
tailwind css_如何使用Tailwind CSS构建样式化的登陆页面
tailwind css 介绍 (Introduction) Developers use Cascading Style Sheets (CSS) to style websites. But of ...
Tailwind CSS 浅析
TailwindCSS 是一个CSS框架,和你知道的bootstrap,element ui,Antd,bulma.一样.将一些css样式封装好,用来加速我们开发的一个工具. 和其他的CSS框架有什么 ...
bulma.css_如何建立一个？具有Bulma CSS的特斯拉响应页面
bulma.css by ZAYDEK 由ZAYDEK 0-60 in 1.9s? (0-60 in 1.9s ?) 如何建立一个? 具有Bulma CSS的特斯拉响应页面 (How To Build ...
Hello Blazor：(2)集成Tailwind CSS
Blazor默认集成了bootstrap,对于我这种后端出身,对CSS一知半解的.NET开发人员来说,使用起来还是有一定难度的. 好不容易才学到点皮毛,结果前端人员居然告诉我,bootstrap已经过 ...
tailwind css_什么是Tailwind CSS，如何将其添加到我的网站或React App中？
tailwind css CSS is a technology that can be your best or worst friend. While it's incredibly flexib ...
[译] Bulma: 2018年你应该关注的CSS框架
原文地址:https://matwrites.com/bulma-css-framework-for-2018/ 在这 Bootstrap 主导的世界里,Semantic UI和Foundation备 ...

Bulma和 Tailwind功能比较