[Tailwind] Create Custom Utility Classes in Tailwind
2024-08-27 00:42:36
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.
最新文章
- 如何解决wow.js与fullpage的兼容性
- welcome to learn prgram
- 图解c/c++多级指针与“多维”数组
- NOI 题库 7084
- apr 内存管理
- unity, SerializedObject.FindProperty不要写在Editor的OnEnable里,要写在OnInspectorGUI里
- HDOJ 1020 Encoding
- Python进阶之闭包
- 马丁&#183;福勒-page对象
- selenium firefox
- vue v-time指令封装(接口返回时间戳 在到日期转换)
- You Don&#39;t Know JS: Scope &; Closures (第3章: 函数 vs 块作用域)
- 开启BBR加速
- 【机器学习算法-python实现】矩阵去噪以及归一化
- Android Toast 使用总结
- .Net用字符串拼接实现表格数据相同时合并单元格
- Django实战(22):处理登录和注销
- SVN 提交代码时强制加入注释内容
- Codeforces 1030F 【线段树】【好题】
- 我所理解的Mongodb 的优势