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. POJ3090 Visible Lattice Points 欧拉筛

    题目大意:给出范围为(0, 0)到(n, n)的整点,你站在原点处,问有多少个整点可见. 线y=x和坐标轴上的点都被(1,0)(0,1)(1,1)挡住了.除这三个钉子外,如果一个点(x,y)不互质,则 ...

  2. apt-get常见错误

      安装错误:“E: Unmet dependencies.” 原因:非正常停止apt-get install * 错误提示:E: Unmet dependencies. Try 'apt-get - ...

  3. The Euler function（hdoj --2824-欧拉函数）

    The Euler function Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Other ...

  4. 杂项-JAVA：MVP

    ylbtech-杂项-JAVA:MVP 简称:MVP 全称:Model-View-Presenter :MVP 是从经典的模式MVC演变而来,它们的基本思想有相通的地方:Controller/Pres ...

  5. sublime的常用插件

    作为一个开发者你不可能没听说过SublimeText.不过你没听说过也没关系,下面让你明白. SublimeText是一款非常精巧的文本编辑器,适合编写代码.做笔记.写文章.它用户界面十分整洁,功能非 ...

  6. guice基本使用,三种注入方式（二）

    guice提供了强大的注入方式. 1.属性注入 2.构造器注入 3.set方式注入 1.属性注入: package com.ming.user.test; import com.google.inje ...

  7. FlappyBird模拟（不完整版本）

    FlappyBird模拟(不完整版本) 准备材料 land地 sky天 pipe管道 bird小鸟 Land.js function Land(info) { this.x = info.x; thi ...

  8. golang new和make的区别

    自:http://www.cnblogs.com/ghj1976/archive/2013/02/12/2910384.html make用于内建类型(map.slice 和channel)的内存分配 ...

  9. cordova 打包工具

    一.环境安装 1.安装NodeJs https://nodejs.org 直接去官网下载并按默认路径安装就可以了. 安装完成后在命令行:   (测试成功!) $ npm 2.安装Cordova 命令行 ...

  10. Linux系统编程博客参考

    通过看前人的博客更易于把握知识要点 http://www.cnblogs.com/mickole/category/496206.html <Linux系统编程> http://www.c ...