/demo-tailwind-css

Demo Tailwind CSS along with Gulp and PostCSS

Primary LanguageJavaScript

Demo Tailwind CSS

Objective

This is a demonstration of Tailwind CSS, Gulp.js, Alpine.js, and more.

Contents:

Introduction

This is a demonstration of:

Tailwind, Gulp, and Alpine all have excellent documentation areas, and we suggest you read them. This page is our work to show how all of these relate and work together to create HTML pages and CSS styles.

Setup

If you're new to Node, Gulp, or PostCSS, then you may want to first read our demo of these: demo-gulp-postcss-autoprefixer

Create the project:

mkdir demo
cd demo
git init
curl https://github.com/github/gitignore/blob/master/Node.gitignore -o .gitignore
npm init -y

Create any directory names you want for your input source files and output distribution files:

mkdir src
mkdir dist

Add Tailwind

Install Tailwind and its peer autoprefixer:

npm install --save-dev tailwindcss@^3.0.24
npm install --save-dev autoprefixer@^10.4.4

Initialize:

npx tailwindcss init

Output:

Created Tailwind CSS config file: tailwind.config.js

File tailwind.config.js is:

module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

Edit to add content:

module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add Tailwind directives

Create file src/style.css and add Tailwind directives:

@tailwind base;
@tailwind components;
@tailwind utilities;

Run Tailwind CLI

For simple projects you can use the Tailwind CLI tool to process your CSS.

Use the -i input option and -o output option:

npx tailwindcss -i ./src/style.css -o ./dist/style.css --watch

Verify the output file contains Tailwind CSS:

cat dist/style.css

View Tailwind using HTML

Create a demonstration HTML file, such as file src/demo.html, with some demo code, such as red text:

<!doctype html>
<html>
    <head>
        <base href="">
        <meta charset="UTF-8">
        <title>Demo Tailwind CSS</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <p class="text-3xl font-bold underline">This is a demo.</p>
    </body>
</html>

If you prefer, use the demo file in this repo:

Copy the demo file from the source diretory to the distribution directory, such as:

cp src/demo.html dist/demo.html

You can open the file in any typical web browser. You will We will automate the workflow next.

Add Tailwind plugins

Tailwind has a variety of optional plugins that we like to use.

Install:

npm install --save-dev @tailwindcss/forms
npm install --save-dev @tailwindcss/typography

Update the file tailwind.config.js:

module.exports = {
  //…
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
    //…
  ],
}

See the demo file with HTML code that uses the plugins as described below:

@tailwindcss/forms is a plugin that provides a basic reset for form styles that makes form elements easy to override with utilities, for example:

<form>
  <input type="checkbox" class="rounded-full text-red-500" />
</form>

@tailwindcss/typography is a plugin that provides a set of prose classes you can use to add beautiful typographic defaults to any vanilla HTML you don't control (like HTML rendered from Markdown, or pulled from a CMS), for example:

<article class="prose lg:prose-xl">
  <h1>Lorum ipsum</h1>
  <p>Dolor sit amet.</p>
  <p>Consectetur adipiscing elit.</p>
</article>

Install Gulp 4

https://gulpjs.com

Gulp is toolkit to automate & enhance your workflow. You can leverage gulp and the flexibility of JavaScript to automate slow, repetitive workflows and compose them into efficient build pipelines.

Install Gulp into the project:

npm install --save-dev gulp@4

Create file gulpfile.js with this:

function defaultTask(cb) {
  // place code for your default task here
  cb();
}

exports.default = defaultTask

If you ever want to use Gulp promises with private functions:

npm install --save-dev gulp-all

Install Gulp CLI 2

Gulp CLI is the Gulp command line interface tool. We prefer to install Gulp CLI globally

Install Gulp CLI:

npm install --global gulp-cli@2

Verify Gulp is working by running:

gulp

You should see output that shows Gulp diagnostics.

Create Gulp tasks

Edit file gulpfile.js and add these typical tasks:

const gulp = require('gulp');

function css(cb) {
  gulp
    .src('./src/**/*.css')
    .pipe(gulp.dest('dist/'));
  cb();
}

function html(cb) {
  gulp
    .src('./src/**/*.html')
    .pipe(gulp.dest('dist/'));
  cb();
}

exports.css = gulp.series(css);
exports.html = gulp.series(html);

exports.build = gulp.parallel(css, html);
exports.default = gulp.parallel(css, html);

Run this to verify:

gulp

You should see output that shows Gulp calling the tasks 'css' and 'html':

Using gulpfile …/gulpfile.js
Starting 'default'...
Starting 'css'...
Starting 'html'...
Finished 'css' after 3.86 ms
Finished 'html' after 6 ms
Finished 'default' after 15 ms

Remove any existing distribution files:

rm dist/*

Run:

npx gulp

Verify the distribution directory includes the style CSS file and demo HTML file:

ls dist

Output:

index.html
style.css

Add PostCSS

PostCSS is a post-processor for cascading style sheets.

Install:

npm install --save-dev gulp-postcss@^9.0.1

If you also want the PostCSS command line interface:

npm install --save-dev postcss-cli@^8.3.1

Edit gulpfile.js to replace the function css with this:

function css(cb) {
  const postcss = require('gulp-postcss')
  gulp
    .src('./src/**/*.css')
    .pipe(postcss([
      require('tailwindcss'),
      require('autoprefixer'),
      require('@tailwindcss/forms'),
      require('@tailwindcss/typography')
    ]))
    .pipe(gulp.dest('dist/'));
  cb();
}

Run:

npx gulp

Verify the distribution style.css file has a bunch of Tailwind code in it:

cat dist/style.css

Output:

/*
! tailwindcss v3.0.24 | MIT License | https://tailwindcss.com
*/
…

Add logging (optional)

We like to use logging in our projects, in order to help with diagnostics, troubleshooting, etc.

For simple logging, we like the use the pino package.

Install:

npm install --save-dev pino

Edit gulpfile.js and add:

const logger = require('pino')()
logger.info('Gulp and pino are working...');

Run:

npx gulp

You should see output that includes the logger info.

Add workflow tooling

Install:

npm install --save-dev npm-check-updates

Alpine JS

Alpine is a lightweight JavaScript library for UI/UX effects, such as showing and hiding a div.

See https://alpinejs.dev/

Alpine is optional. We like it because it helps with effects, and is lighter than jQuery, and easy to add to HTML.

Install Alpine JS:

npm install --save-dev alpinejs@^3.10.1

To use Alpine via CDN, one way is to add this to your HTML <head> section:

<script src="//unpkg.com/alpinejs" defer></script>

Example to show or hide a div:

<div @click.away="open = false" x-data="{ open: false }">
    <div>
        <button @click="open = !open">
            Hello
        </button>
    </div>
    <div x-show="open">
        World
    </div>
</div>

Maintenance

Update:

npm audit fix
npm --save update
npx browserslist@latest --update-db

Upgrade:

npx npm-check-updates --upgrade

Redo:

rm package-lock.json 
rm -rf node_modules 
npm cache clean --force t
npm install