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. 轻快的vim（二）：插入

    上一节我们讲到了VIM中的移动,既然已经能够在屏幕和光标间游刃有余了 那么,现在就来谈谈插入命令 不知道有多少VIM新手和我当年(去年)一样,信誓旦旦的以为只有i可以插入 唉,现在想想都觉得可笑,都是 ...

  2. PHP中数据类型转换的三种方式

    PHP中数据类型转换的三种方式 PHP的数据类型转换属于强制转换,允许转换的PHP数据类型有: 1.(int).(integer):转换成整形2.(float).(double).(real):转换成 ...

  3. 【Codeforces 258D】 Count Good Substrings

    [题目链接] http://codeforces.com/contest/451/problem/D [算法] 合并后的字符串一定是形如"ababa","babab&qu ...

  4. [JavaEE] Apache Maven 入门篇(上)

    http://www.oracle.com/technetwork/cn/community/java/apache-maven-getting-started-1-406235-zhs.html 作 ...

  5. yii1 session

    在 Yii框架中使用session 的笔记: 首先,在Yii框架中,你不需要像标准PHP代码那样使用session_start(),在Yii框架中,autoStart 属性缺省被设置为true,所以, ...

  6. 【转】Java的可变类与不可变类

    1.可变类和不可变类(Mutable and Immutable Objects)的初步定义: 可变类:当你获得这个类的一个实例引用时,你可以改变这个实例的内容. 不可变类:当你获得这个类的一个实例引 ...

  7. BZOJ4832: [Lydsy1704月赛]抵制克苏恩(期望DP)

    Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 913  Solved: 363[Submit][Status][Discuss] Description ...

  8. QT+VTK 对接使用

    由于MFC和pcl的不兼容问题,只能用QT和VTK进行程序开发,确实是一件蛋疼的事! 出自于QT与VTK结合系列:http://blog.csdn.net/tonylk/article/details ...

  9. win 2016 添加系统组件注册表,

    Windows Registry Editor Version 5.00 [HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\ServerManager\ServicingS ...

  10. "国学"能带给孩子什么？

       您是家长吗?   是!就点标题下方蓝色的 静心坊 三字,然后点关注!您就可以享受到我们为您提供的最新教育信息. 读国学,除大量识字之外,还能带给孩子什么呢? 男孩子读国学,国学能教会他做一个正直 ...