[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