In this lesson, we learn how to generate CSS utility classes from Tailwind's JavaScript config file. We set up a new project from scratch, install tailwind, generate a config file and build a simple gulp task that runs that file through PostCSS to generate the desired CSS output.

file through PostCSS via gulp.

Install:

npm i -D tailwindcss gulp gulp-postcss autoprefixer

Init a tailwind config file:

npx tailwind init

or

node_modules/.bin/tailwind init tailwind.js

It will generates a tailwind.js file.

Gulp setup:

const gulp = require("gulp");

const postcss = require("gulp-postcss");

const tailwindcss = require("tailwindcss");

const PATHS = {

  css: "./src/styles.css",

  confing: "./tailwind.js",

  dist: "./"

};

gulp.task("css", () => {

  return gulp

    .src(PATHS.css)

    .pipe(postcss([tailwindcss(PATHS.config), require("autoprefixer")]))

    .pipe(gulp.dest(PATHS.dist));

});

src/styles.css:

/**

 * This injects Tailwind's base styles, which is a combination of

 * Normalize.css and some additional base styles.

 *

 * You can see the styles here:

 * https://github.com/tailwindcss/tailwindcss/blob/master/css/preflight.css

 *

 * If using `postcss-import`, use this import instead:

 *

 * @import "tailwindcss/preflight";

 */

 @tailwind preflight;

 /**

  * This injects any component classes registered by plugins.

  *

  * If using `postcss-import`, use this import instead:

  *

  * @import "tailwindcss/components";

  */

 @tailwind components;

 /**

  * Here you would add any of your custom component classes; stuff that you'd

  * want loaded *before* the utilities so that the utilities could still

  * override them.

  *

  * Example:

  *

  * .btn { ... }

  * .form-input { ... }

  *

  * Or if using a preprocessor or `postcss-import`:

  *

  * @import "components/buttons";

  * @import "components/forms";

  */

 /**

  * This injects all of Tailwind's utility classes, generated based on your

  * config file.

  *

  * If using `postcss-import`, use this import instead:

  *

  * @import "tailwindcss/utilities";

  */

 @tailwind utilities;

 /**

  * Here you would add any custom utilities you need that don't come out of the

  * box with Tailwind.

  *

  * Example :

  *

  * .bg-pattern-graph-paper { ... }

  * .skew-45 { ... }

  *

  * Or if using a preprocessor or `postcss-import`:

  *

  * @import "utilities/background-patterns";

  * @import "utilities/skew-transforms";

  */

Run:

gulp css

It will generate a styles.css inside root folder.

index.html:

<html>

<head>

  <meta charset="UTF-8">

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

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

  <title>Abstract components with tailwind</title>

  <link rel="stylesheet" href="./styles.css">

</head>

<body>

  <h1 class="text-purple

          sm:text-grey-dark

          md:text-red-dark

          lg:text-orange-dark

          bg-pink-dark

          sm:bg-grey-lighter

          md:bg-teal-lighter

          lg:bg-indigo-lighter

          p-8 mt-8">Hello Tailwind!</h1>

</body>

</html>

Those are repsonsive site related stuff, checkout the doc.

          sm:text-grey-dark

          md:text-red-dark

          lg:text-orange-dark

          bg-pink-dark

          sm:bg-grey-lighter

          md:bg-teal-lighter

          lg:bg-indigo-lighter

[Tailwind] Get started with Tailwindcss的更多相关文章

  1. Rails6使用tailwind CSS

    tailwind的特色(在Bootstrap 和vanilla Css之间) https://tailwindcss.com/docs/what-is-tailwind/ Rails6 six版本的R ...

  2. Web前端兼容性指南

    一.Web前端兼容性问题 一直以来,Web前端领域最大的问题就是兼容性问题,没有之一. 前端兼容性问题分三类: 浏览器兼容性 屏幕分辨率兼容性 跨平台兼容性 1.浏览器兼容性问题 第一次浏览器大战发生 ...

  3. [Tailwind] Extending Tailwind with Responsive Custom Utility Classes

    You are able to extend the custom css with hover, focus, group-hover, responsive variants class in t ...

  4. [Tailwind] Create Custom Utility Classes in Tailwind

    In this lesson, we learn how to generate custom utility classes in tailwind. We add new properties t ...

  5. [Poi] Setup PostCSS and Tailwind with Poi

    This lesson walks through setting up a Poi project using PostCSS and the popular Tailwind library fo ...

  6. Tailwind CSS in Action

    Tailwind CSS in Action Tailwind CSS是一个高度可定制的低级CSS框架,它为您提供了构建定制设计所需的所有构造块,而无需烦恼要覆盖的烦人的自以为是的样式 https:/ ...

  7. React简单教程-3.1-样式之使用 tailwindcss

    前言 本文是作为一个额外内容,主要介绍 tailwindcss 的用法 tailwindcss 是一个功能类优先的 CSS 框架,我在以前的文章里有描述为什么使用功能类优先:为什么我在 css 里使用 ...

  8. [Tailwind] Abstract Utility Classes to BEM Components in Tailwind

    When creating UIs with utility classes, a lot of repetition can occur within the HTML markup. In thi ...

  9. [Tailwind] Control What Variations are Generated for Each Utility Class Module in Tailwind

    In this lesson, we learn how to control what utility classes are generated for each utility class mo ...

随机推荐

  1. java怎么学

    java怎么学 给你推荐一个写得非常用心的Java基础教程:Java入门基础教程 | 天码营 这个教程将Java的入门基础知识贯穿在一个实例中,逐步深入,可以帮助你快速进入Java编程的世界.万事开头 ...

  2. Head First 设计模式 —— 工厂模式与工厂方法

    1. 实例化对象的方法 制造对象的方法不只 new 操作符一种.且实例化这个动作不应该总是公开地进行,还有初始化常常造成耦合问题.由此提出的工厂模式以进一步封装实例化的活动,且避免对象初始化时的可能产 ...

  3. Java攻城狮之基础练习题------经典例题

    (一)键盘录入1----7,分别于控制台输出对应的周一,周二,周三,周四,周五,周六,周天. (二)设置一个数组,求出数组中对应的最大值以及索引. (三)在控制台输出9x9乘法口诀表. (四)使用冒泡 ...

  4. x64汇编第三讲,64位调用约定与函数传参.

    目录 x64汇编第三讲,64位调用约定与函数传参. 一丶复习X86传参 二丶x64汇编 2.1汇编详解 x64汇编第三讲,64位调用约定与函数传参. 一丶复习X86传参 在x86下我们汇编的传参如下: ...

  5. BZOJ 2729 高精度+组合数学

    思路: 考虑 把男生排成一排 女生和老师往里插 分成两种情况. 1. 女生中间夹着老师 2. 女生中间没有夹着老师 求一下组合* 阶乘就好了 先放Python代码 简洁易懂 def fact(n): ...

  6. MVC HtmlHelper扩展——实现分页功能

    MVC HtmlHelper扩展类(PagingHelper) using System; using System.Collections.Generic; using System.Collect ...

  7. 重温前端基础之-css浮动与清除浮动

    文档流的概念指什么?有哪种方式可以让元素脱离文档流? 文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行,并在每行中按从左到右的顺序排放元素.脱离文 ...

  8. Spring aop（实验写法）

    1. 创建通知:定义一个接口 Public interface Sleepable { voidsleep(); }然后写一个Human类,他实现了这个接口 publicHuman implement ...

  9. 【Five-Minute Share】“请先了解所使用的工具 ，磨刀不误砍柴工”

    数据是应用系统的血液,没有数据的系统应用价值是非常有限的.经过多年的观察发现,身边很多的程序开发人员在开发应用系统的时候,都是按照标准SQL语法及应用方法去进行数据库设计,并进行应用开发的,没有任何的 ...

  10. 关于XML学习

    XML为知识构架存储语言: http://www.w3school.com.cn/xml/xml_tree.asp 语义网:为计算机构建一个系统的概念网络模型是计算机理解概念和机间信息交流的途径:XM ...