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