[Tailwind] Create Custom Utility Classes in Tailwind
In this lesson, we learn how to generate custom utility classes in tailwind. We add new properties to our JavaScript config object to generate new helper classes to suit our needs.
Update gulpfile.js:
const gulp = require("gulp");
const postcss = require("gulp-postcss");
const tailwindcss = require("tailwindcss"); const PATHS = {
css: "./src/styles.css",
config: "./tailwind.js",
dist: "./"
}; gulp.task("css", () => {
return gulp
.src(PATHS.css)
.pipe(postcss([tailwindcss(PATHS.config), require("autoprefixer")]))
.pipe(gulp.dest(PATHS.dist));
}); gulp.task("default", ["css"], () => {
gulp.watch(PATHS.config, ["css"]);
});
For example, you want to add some custom margin and padding in tailwind.js file:
margin: {
'auto': 'auto',
'px': '1px',
'0': '0',
'1': '0.25rem',
'2': '0.5rem',
'3': '0.75rem',
'4': '1rem',
'6': '1.5rem',
'8': '2rem',
'16': '4rem', //added
'crazy': '8rem', //added
},
padding: {
'px': '1px',
'0': '0',
'1': '0.25rem',
'2': '0.5rem',
'3': '0.75rem',
'4': '1rem',
'6': '1.5rem',
'8': '2rem',
'16': '4rem', //added
'crazy': '16rem', //added
},
After run 'gulp' command.
index.html
<h1 class="text-purple
bg-pink-dark
p-crazy mt-crazy">Hello Tailwind!</h1>
Checkout more on docs.
[Tailwind] Create Custom Utility Classes in Tailwind的更多相关文章
- [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 ...
- [Tailwind] Apply mobile-first Responsive Classes in Tailwind
In this lesson, we take a look at tailwind's mobile-first CSS architecture and learn how to apply st ...
- [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 ...
- Utility Classes Are Evil
原文地址:http://alphawang.com/blog/2014/09/utility-classes-are-evil/ This post is a summary of this arti ...
- How to: Create Custom Configuration Sections Using ConfigurationSection
https://msdn.microsoft.com/en-us/library/2tw134k3.aspx You can extend ASP.NET configuration settings ...
- Top 15 Java Utility Classes
In Java, a utility class is a class that defines a set of methods that perform common functions. Thi ...
- How to Create Custom Filters in AngularJs
http://www.codeproject.com/Tips/829025/How-to-Create-Custom-Filters-in-AngularJs Introduction Filter ...
- create custom launcher icon 细节介绍
create custom launcher icon 是创建你的Android app的图标 点击下一步的时候,出现的界面就是创建你的Android的图标 Foreground: ” Foregro ...
- add a private constructor to hide the implicit public one(Utility classes should not have public constructors)
sonarlint提示add a private constructor to hide the implicit public one Utility classes should not have ...
随机推荐
- javascript设计模式-继承
javascript继承分为两种:类式继承(原型链.extend函数).原型式继承(对继承而来的成员的读和写的不对等性.clone函数). 类式继承-->prototype继承: functio ...
- springboot整合ActiveMQ 2(主备模式,负载均衡)
基本使用,https://www.tapme.top/blog/detail/2018-09-05-10-38 主备模式,https://www.tapme.top/blog/detail/2018- ...
- My first blog for java
我的第一个java程序: package com.hellojava; /** * @author 沽-名-钓-誉 */ public class HelloJava{ /** * @param 输出 ...
- 关于中文期刊LaTeX的CCT相关
最近写完了大论文,回身看了一下CTeX的信息,看了下弄改进版套装的山大和清华的两位大神的博客,发现大神们倒腾过CCT. CCT的FTP还是一直可用的,ftp://ftp.cc.ac.cn/pub/cc ...
- 08.十分钟学会JSP传统标签编程
一.认识标签 1,说明:传统标签编程在开发中基本用不到,学习标签编程主要还是为了完善知识体系. 2,标签的主要作用:移除或减少jsp中的java代码 3,标签的主要组成部分及运行原理 4,简单标签示例 ...
- 【Oracle】查询当前SCN
介绍两种方式: 一.sys用户下: select current_scn from v$database; select dbms_flashback.get_system_change_number ...
- 计算机二级考试Access教程
本教程对编程语言各种要点进行详细的讲解介绍,从基础知识到实用技术功能,内容涵盖了从数组,类等基本概念到多态.模板等高级概念.教程本着实用的原则,每一小节都结合了可以笔试.面试的常见程序实例,以便从第一 ...
- 三维点集拟合:平面拟合、RANSAC、ICP算法
ACM算法分类:http://www.kuqin.com/algorithm/20080229/4071.html 一: 拟合一个平面:使用SVD分解,代码里面去找吧 空间平面方程的一般表达式为: A ...
- word2016如何英汉互译
1.如果是一篇英文文档且是pdf格式,可以用word2016打开直接转化成了word,就算不是会员也可以的,在此附上16版的光盘安装包,可以百度自行下载 (链接:https://pan.baidu.c ...
- 何使用ultraiso软碟通制作u盘启动盘(转载)
现在很多网友都不知道如何用UltraISO软件来制作制作u盘启动盘,那么今天U大师小编就来给大家简单的介绍两种方法,首先第一种方法就是网友要到网上下载一个UltraISO软件,这个网上有很多的 ...