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. 详解Dialog(二)——有关列表的构建

    版权声明:本文为博主原创文章,未经博主允许不得转载. 目录(?)[+] 前言:这段时间真是忙啊忙啊忙,元旦三天假加了两天班,已经连续六周只放一天了,天天加班到十点多,真是有一口血吐在屏幕上的感觉了,博 ...

  2. bzoj4956: [Wf2017]Secret Chamber at Mount Rushmore

    F......loyd? 这范围也是..... 然而大了也不会.... #include<cstdio> #include<iostream> #include<cstr ...

  3. linux下nmap工具的使用

    NMap,也就是Network Mapper,是Linux下的网络扫描和嗅探工 具包,其基本功能有三个,一是探测一组主机是否在线:其次是扫描主机端口,嗅探所提供的网络服务:还可以推断主机所用的操作系统 ...

  4. [ASPX] 模版引擎XTemplate与代码生成器XCoder（源码）

    模版引擎XTemplate是一个仿T4设计的引擎,功能上基本与T4一致(模版语法上完全兼容T4,模版头指令部分兼容). 自己设计模版引擎,就是为了代码生成器.网站模版.邮件模版等多种场合,也就是要能拿 ...

  5. Svn install and use

    1.安装服务 使用yum安装subversion,简单.不繁琐. 1 yum install -y subversion 2.创建版本库 1 2       mkidr /svn/obj        ...

  6. Oracle---显式游标

    一  游标的分类 在Oracle中提供了两种类型的游标:静态游标和动态游标. 1.静态游标是在编译时知道其SELECT语句的游标.静态游标又分为两种类型,即隐式游标和显式游标. 2.当用户需要为游标使 ...

  7. 如何在Linux下添加自己的驱动

    在此Linux驱动开发采用网络的方式,介绍两种驱动开发的方法:一.驱动编译到内核 1.先选择一个放置驱动代码的位置,例:drivers/char/xxx.c 2.在drivers/char/Kconf ...

  8. JavaScript数组和json的区别

    <html> <head> <meta charset="utf-8"> <title>无标题文档</title> &l ...

  9. 搭建eclipse的安卓开发环境（eclipse+jdk+adt+sdk)

    学校暑期大作业让用安卓写一个app,有两种方案(android stduio+sdk和eclipse+jdk+adt+sdk)折腾了几天发现还是后者好用,但是安装环境和下载真的是去了半条命,(不过由于 ...

  10. node linux服务器部署 centos

      1下载 wget https://nodejs.org/dist/v6.9.5/node-v6.9.5-linux-x64.tar.xz  2解压 tar xvf node-v6.9.5-linu ...