当前位置：首页 > 软件库 > Web应用开发 > CSS框架 >

Tailwind CSS

快速 UI 开发 CSS 框架

授权协议 MIT

开发语言 HTML/CSS

所属分类 Web应用开发、 CSS框架

软件类型开源软件

地区不详

投递者彭烨烁

操作系统跨平台

开源组织无

适用人群未知

软件官网

软件文档

官方下载

软件概览

Tailwind 是一个用于快速 UI 开发的实用工具集 CSS 框架，设计理念是以实用为先，它提供了高度可组合的应用程序类，可帮助开发者轻松构建复杂的用户界面。它还提供了一个从实用模式中提取组件的工具，响应式风格可以满足不同设备上的开发。

与 Bootstrap、Foundation 或 Bulma 等框架不同，Tailwind CSS 并不是 UI 套件，因为它没有没有内置的 UI 组件，也没有默认的主题，完全需要开发者根据自身情况来定制设计。

Tailwind 仅仅是一个 CSS 框架，它还是构建设计系统的引擎。

const colorPalette = {
  // ...
  'grey-lighter': '#f3f7f9',
  // ...
}

module.exports = {
  // ...
  backgroundColors: colorPalette,
  borderColors: {
    default: colorPalette['grey-lighter'],
    ...colorPalette,
  },
  // ...
}

示例：

下面是一个用 Tailwind 构建联系人卡片组件的例子，无需写一行 CSS ：

<div class="bg-white mx-auto max-w-sm shadow-lg rounded-lg overflow-hidden">
  <div class="sm:flex sm:items-center px-6 py-4">
    <img class="block h-16 sm:h-24 rounded-full mx-auto mb-4 sm:mb-0 sm:mr-4 sm:ml-0" src="https://avatars2.githubusercontent.com/u/4323180?s=400&u=4962a4441fae9fba5f0f86456c6c506a21ffca4f&v=4" alt="">
    <div class="text-center sm:text-left sm:flex-grow">
      <div class="mb-4">
        <p class="text-xl leading-tight">Adam Wathan</p>
        <p class="text-sm leading-tight text-grey-dark">Developer at NothingWorks Inc.</p>
      </div>
      <div>
        <button class="text-xs font-semibold rounded-full px-4 py-1 leading-normal bg-white border border-purple text-purple hover:bg-purple hover:text-white">Message</button>
      </div>
    </div>
  </div>
</div>

使用案例

使用React和Tailwind CSS搭建项目框架

众所周知，Tailwind CSS框架越来越流行，所以我决定尝试学习并使用Tailwind CSS来搭建一个项目模板，一方面自己深入学习下，二来帮助新人更快地上手Tailwind CSS开发。创建一个React项目通过使用create-react-app命令创建一个新的React项目 npx create-react-app cra-tailwind-template cd cra-tailw
Tailwindcss安装

我真是服了，安装了一天各种问题报错，按照官网文档完全不行（因为按照官网的教程会出版本兼容问题），我搜网上的教程扯一大堆无用代码。。。摸索到它的套路后在此记录吧。 1.安装tailwindcss npm i tailwindcss 2.安装postcss npm i postcss 3.安装postcss-loader (注意不要安装过高版本容易出兼容问题) npm i postcss-lo
什么是TailwindCSS（二）

scss 有了tailwind，可以做到不需要写css文件，而且也不建议写。因为这样就失去了tailwind的意义。但是，如果还是需要写css文件，可以使用下面的方式。在css中使用@apply应用tailwind的样式。 .card { @apply rounded-full w-20 h-20 bg-gray-100; } custom tailwind定义了一个统一的长度，宽
tailwindcss使用教程

安装Tailwind npm install -D tailwindcss@latest postcss@latest autoprefixer@latest 创建配置文件 npx tailwindcss init -p 会在项目中创建tailwind.config.js文件和postcss.config.js文件引入Tailwind样式到项目中创建一个css样式文件，引入： @tailwin
TailwindCSS常用类大全

经典常用配置大小类 w-{size}：设置元素宽度，例如 w-1/2 表示元素宽度为父容器宽度的一半。 h-{size}：设置元素高度，例如 h-16 表示元素高度为 16 像素。 max-w-{size}：设置元素最大宽度，例如 max-w-md 表示元素最大宽度为中等屏幕大小。 max-h-{size}：设置元素最大高度，例如 max-h-screen 表示元素最大高度为屏幕高度。 min-
常用的 tailwindcss 模板站点

Tailwind Play aniftyco/awesome-tailwindcss rosstopping/tailwindcss-templates cruip/tailwind-landing-page-template moesaid/cleopatra wobsoriano/v-dashboard
Windi Css

一、Windi Css是什么？对于我来说Windi Css是一个可以让我们快速上手开发的一个组件库，他里面包含了几乎所有的css样式，可以让我们不需要再去繁琐的写css样式，原来几行的css现在只需要短短的几个字符。他的许多新特性给我们带来了极大的方便，并且他给我们带来了更快的加载体验二、代码演示具体使用方法查阅windi Css的文档我在这里只记录一个片段代码如下（示例）： <temp
在Vue中安装TailwindCSS

1.安装 Tailwind CSS # 使用npm $ npm install tailwindcss -D # 使用yarn $ yarn add tailwindcss -D 2.创建 Tailwind CSS 配置文件 $ npx tailwindcss init 3.配置tailwind.config.js Since Tailwind no longer uses PurgeCSS

Tailwind CSS

同类工具

相关阅读

相关文章

相关问答

相关文档