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. js设计模式-享元模式

    享元模式实际上是一种优化模式,目的在于提高系统的性能和代码的效率. 使用享元模式的条件:最重要的条件是网页中必须使用了大量资源密集型对象,如果只会用到了少许这类对象,那么这种优化并不划算.第二个条件是 ...

  2. javascript设计模式-掺元类

    有一种重用代码的方法不需要用到严格的继承.如果想把一个函数用到多个类中,可以通过扩充的方式让这些类共享该函数.其实际做法大大体为:先创建一个包含各种通用方法的类,然后再用它扩充其他的类.这种方式就叫做 ...

  3. HTML不熟悉方法总结

    1. onblur   属性在元素失去焦点时触发. 2. onfocus 属性在元素获得焦点时触发. 3.addEventlistener 事件监听 4.focus() 方法用于给予该元素焦点.这样用 ...

  4. 学习java的方式

  5. javascript中对象属性搜索原则

    为什么通过对象就能访问到原型中的属性或者方法? 属性搜索原则: 1 首先会在对象本身查找有没有该属性,如果有直接返回 2 如果没有,此时就会在构造函数中查找通过this给对象添加的成员中有没有,如果有 ...

  6. 【PYTHON】编码是个细致活

    python逆向获取DNS时用到一个函数socket.gethostbyaddr,传入本地主机地址后报错如下: UnicodeDecodeError: 'utf-8' codec can't deco ...

  7. AI:**消灭程序员需要一百年吗？

    这篇博文真的很长,不过挺有意思.关于智能机器人的发展前景还是很广的,因为每一步都异常艰难,而什么时候可以终止还无法预料,所以程序员没办法失业啊! 转自于图灵社区:http://www.ituring. ...

  8. 2017/01/20 学习笔记 关于修改和重打jar包

    背景 客户提供了jar包,但发现db表中缺少一个字段,db追加以后需要修改jar包中的source. 操作  如何修改jar包中的source并重新打一个新的jar包,做了如下操作. ① 开包 解压j ...

  9. 搜索关键词和类目url简短化

    电商网站中有很多搜索关键词或者类目的url往往是一大串的url:有个需求是将长的url如: 域名+/products.html?q=大侠&showtype=img&sort=isTra ...

  10. RxSwift源码与模式分析一：基本类

    封装.变换与处理 // Represents a push style sequence. public protocol ObservableType : ObservableConvertible ...