[Tailwind] Get started with Tailwindcss
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的更多相关文章
- Rails6使用tailwind CSS
tailwind的特色(在Bootstrap 和vanilla Css之间) https://tailwindcss.com/docs/what-is-tailwind/ Rails6 six版本的R ...
- Web前端兼容性指南
一.Web前端兼容性问题 一直以来,Web前端领域最大的问题就是兼容性问题,没有之一. 前端兼容性问题分三类: 浏览器兼容性 屏幕分辨率兼容性 跨平台兼容性 1.浏览器兼容性问题 第一次浏览器大战发生 ...
- [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] Create Custom Utility Classes in Tailwind
In this lesson, we learn how to generate custom utility classes in tailwind. We add new properties t ...
- [Poi] Setup PostCSS and Tailwind with Poi
This lesson walks through setting up a Poi project using PostCSS and the popular Tailwind library fo ...
- Tailwind CSS in Action
Tailwind CSS in Action Tailwind CSS是一个高度可定制的低级CSS框架,它为您提供了构建定制设计所需的所有构造块,而无需烦恼要覆盖的烦人的自以为是的样式 https:/ ...
- React简单教程-3.1-样式之使用 tailwindcss
前言 本文是作为一个额外内容,主要介绍 tailwindcss 的用法 tailwindcss 是一个功能类优先的 CSS 框架,我在以前的文章里有描述为什么使用功能类优先:为什么我在 css 里使用 ...
- [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 ...
- [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 ...
随机推荐
- hihoCoder-1828 2018亚洲区预选赛北京赛站网络赛 A.Saving Tang Monk II BFS
题面 题意:N*M的网格图里,有起点S,终点T,然后有'.'表示一般房间,'#'表示毒气房间,进入毒气房间要消耗一个氧气瓶,而且要多停留一分钟,'B'表示放氧气瓶的房间,每次进入可以获得一个氧气瓶,最 ...
- 快速排序c++实现 快排C++代码实现
快速排序c++实现 快排C++ 第一.算法描述 快速排序由C. A. R. Hoare在1962年提出,该算法是目前实践中使用最频繁,实用高效的最好排序算法, 快速排序算法是采用分治思想的算法,算法分 ...
- HDU 2520 我是菜鸟我怕谁
2019-05-27 17:52:01 加油!!! 看题时候就要仔细,最后容易忘记%10000 #include <bits/stdc++.h> using namespace std; ...
- （转）Java进阶java int与Integer的区别
Java进阶java int与Integer的区别 前言 int与Integer的区别从大的方面来说就是基本数据类型与其包装类的区别: int 是基本类型,直接存数值,而Integer是对象,用一个引 ...
- 关于KO信息
最近写大论文查到KO也是可以用于分类的一种信息. 如何使用KEGG进行通路富集http://blog.sciencenet.cn/blog-364884-779116.html kegg 数据库学习笔 ...
- 部署TaskBoard
部署TaskBoard kiswa/TaskBoard: A Kanban-inspired app for keeping track of things that need to get done ...
- MFC多标签页对话框
原文链接(有修改):http://blog.sina.com.cn/s/blog_6a1cdb3f0101llcw.html 1.新建一个MFC工程 取名PageSheet,选择Dialog base ...
- chrome、firefox、IE中input输入光标位置错位解决方案
以前在项目里碰到过一个问题 input输入框用一个背景图模拟,设置height和line-height一样的高度,使里面的输入文字能够居中, 在FF下出现的情况是:点击input时,输入光标其实上跟i ...
- C# 1.将整个文件夹复制到目标文件夹中 2.将指定文件复制到指定目标文件夹中
].Items.Clear(); string filePath = Application.StartupPath; string sourcePath = Path.Combine(filePat ...
- （转）RabbitMQ学习之主题topic（java）
http://blog.csdn.net/zhu_tianwei/article/details/40887775 参考:http://blog.csdn.NET/lmj623565791/artic ...