The Tailwind CSS framework is a utility-first CSS framework designed to help you rapidly build modern websites.

Prerequisites
  • Node.js

Getting Started

Step 1: Install the Command Line Interface

I installed the Tailwind CSS CLI globally using npm:

npm install -g tailwindcss

You can check your installation by running the following command:

tailwindcss -h

You should see something like:

tailwindcss v3.1.8

Usage:
   tailwindcss [--input input.css] [--output output.css] [--watch] [options...]
   tailwindcss init [--full] [--postcss] [options...]

Commands:
   init [options]

Options:
   -i, --input              Input file
   -o, --output             Output file
   -w, --watch              Watch for changes and rebuild as needed
   -p, --poll               Use polling instead of filesystem events when watching
       --content            Content paths to use for removing unused classes
       --postcss            Load custom PostCSS configuration
   -m, --minify             Minify the output
   -c, --config             Path to a custom config file
       --no-autoprefixer    Disable autoprefixer
   -h, --help               Display usage information

Step 2: Create a workspace

To create a new workspace:

mkdir tailwind-css
cd tailwind-css

Step 3: Create a project folder

To create a project folder:

mkdir website
cd website

Use npm init to initialise the project:

npm init

Step 3: Install the Tailwind CSS framework

To install the Tailwind CSS framework:

npm install --save-dev tailwindcss

Create the tailwind.config.js file:

tailwindcss init

Step 4: Create an index.html file

Create an index.html file:

mkdir public
cd public
nano index.html

And update it as follows:

<!DOCTYPE HTML>
<html lang="en">

  <head>

    <meta charset="utf-8" />

    <link href="./assets/images/favicon.ico" rel="icon" type="image/x-icon" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />

    <title>Tailwind CSS | Starter Project</title>
    <meta name="description" content="A Tailwind CSS Starter Project." />
    <meta name="keywords" content="Tailwind CSS"/>

    <link href="./styles.css" rel="stylesheet" />

  </head>

  <body>
  
    <!-- Place content (blocks) here -->

  </body>

</html>

Step 5: Create a styles.css file

Create an styles.css file:

mkdir src
cd src
nano styles.css

Add the @tailwind directives to the styles.css file:

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

Step 6: Update the tailwind.config.js file

Update the tailwind.config.js file:

const colors = require('tailwindcss/colors')

module.exports = {
  content: [
    "./public/*.html"
  ],
  theme: {
    colors: {
      primary: colors.blue
    }
  },
  plugins: []
}

Your project should now look something like:

.
└── website
    ├── package.json
    ├── public
    │   ├── assets
    │   │   ├── images
    │   │   │   ├── favicon.ico
    │   │   │   └── orcada-logo.png
    │   │   └── js
    │   │       └── flowbite.js
    │   ├── index.html
    │   └── styles.css
    ├── src
    │   └── styles.css
    └── tailwind.config.js

Step 7: Start the Tailwind CLI build process

tailwindcss -i ./src/styles.css -o ./public/styles.css --watch

Preview your website:

home

Flowbite

If you are looking for inspiration then you take a look at Flowbite.

It is designed to make building Tailwind CSS websites even faster.

To install Flowbite:

npm install --save-prod flowbite
npm install --save-dev flowbite-typography

Update the tailwind.config.js file:

const colors = require('tailwindcss/colors')

module.exports = {
  content: [
    "./public/*.html",
    "./assets/js/*.js"
  ],
  darkMode: 'class',
  theme: {
    colors: {
      primary: colors.blue,
      secondary: colors.gray,
      'brand': {
        blue: '#00aeef',
        DEFAULT: '#00aeef',
        lightblue: '#8ed1fc',
      },
    }
  },
  plugins: [
    require('flowbite/plugin'),
    require('flowbite-typography')
  ]
}

And update the index.html file to include flowbite.js:

<!DOCTYPE HTML>
<html lang="en">

  <head>

    ...

  </head>

  <body>
  
    <!-- Place content (blocks) here -->
 
    <script src="./assets/js/flowbite.js"></script>

  </body>

</html>
Resources: