[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 ...
随机推荐
- Cookies操作类
实现代码: //声名一个数据集合 var listString = new List<string>() { "a", "b", "c&q ...
- ClassLoader.getResourceAsStream(name);获取配置文件的方法
ClassLoader.getResourceAsStream(name);路径问题 InputStream in = getClass().getResourceAsStream('/'+" ...
- [ASP.Net] 转 > ASP.NET MVC 大牛之路
URL: http://www.cnblogs.com/willick/ [ASP.NET MVC 大牛之路]01 - 开篇 [ASP.NET MVC 大牛之路]02 - C#高级知识点概要(1) - ...
- 用opcity模拟zindex渐变的效果
github地址: https://github.com/echoorx/opacity-Gradient zindex好像不能渐变改变,所以用opcity来模拟 <!DOCTYPE html& ...
- Goldengate升级之目标端(replicat端)升级
转自红黑联盟Goldengate升级之目标端(replicat端升级 要升级replicat端的原因为:目标端OGG软件版本与源端OGG软件版本不同,在实际生产应用中,经常发现replicat端事务丢 ...
- CodeIgniter + smarty 实现widget功能
在开发过程中,经常需要widget功能,一可以隔离页面逻辑,二可以重用代码.结合smarty的plugin功能,可以方便的实现该功能. 譬如,我们的页面中可以这样写: {{extends file=' ...
- 使用postman模拟登录请求
Cookie 可以写在Headers里面
- switch注意事项
Day03_SHJavaTraining_4-5-2017 switch注意事项:①switch语句接受的数据类型 switch语句中的表达式的数据类型,是有要求的 JDK1.0 - 1.4 数 ...
- OnLineML一:关于Jubatus 的简介...
一:简介:原文链接:jubat.us/en/ xuwenq.iteye.com/blog/1702746 Jubatus http://jubat.us/en/overview.html 是一个面向 ...
- Warning:关于_CRT_SECURE_NO_WARNINGS
Warning 1 warning C4996: 'fopen': This function or variable may be unsafe. Consider using fopen_s in ...