Tailwind integrates nicely into modern frameworks like React and Vue but you might run into a scenario where you want to use tailwind in a project not using a framework. Maybe you're working on an old framework that's not using webpack or something similar that incorporates Tailwind's build tools. You can use tailwind-cli to make lean stylesheets and also take advantage it's auto-build functionality to see real time updates in your local dev environment. Here's a quick guide to get you started using Tailwindcss.

Installation

Quick Installation

For a quick install you can use the CDN version of Tailwind that has most, but not all, features Tailwind offers.

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

Integrated Installation

Follow the link below for instructions on installing using popular JS frameworks with integrated build tools like Webpack.

https://tailwindcss.com/docs/installation

Custom Installation w/ Tailwind CLI

For standalone installations in projects that don't use build tools, like AngularJS, you can use Tailwind command line tools.

Install Tailwind and it's dependencies:

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

Create Tailwind configuration file:

Running this command in the root of your project will create a file named "tailwind.config.js" with basic settings.

npx tailwindcss init

The most important part of the config file is to define which files you want Tailwind to use to generate your custom stylesheet. The purge section looks like the following code block. This tells Tailwind to look recursively in the "./FRONTEND_DIR_ONE/" and "FONTEND_DIR_TWO" folders for changes in all Javascript and HTML files.

module.exports = {
  mode: 'jit',
  purge: ['./FRONTEND_DIR_ONE/**/*.{htm,html,js,ts,jsx,tsx}', './FRONTEND_DIR_TWO/**/*.{htm,html,js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  plugins: [],
}

Create a CSS file in the root of your project called 'tailwind.css'  for Tailwind CLI to use:

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

Example command to generate a custom stylesheet as you edit your code:

Using the CLI enables you to create an extremely small CSS file for production that only uses the classes used in your project opposed to including the entire Tailwind framework.

npx tailwind build -i tailwind.css -o ./frontend/css/base.min.css -c tailwind.config.js -m -w

Let's breakdown this command to understand what arguments we are passing to it.

Base Command
This portion of the command calls the tailwind CLI and passes the "build" command.

npx tailwind build

Input File:  -i
The "i" option tells tailwind your input file. The input file contains the imports for the Tailwind library and any custom classes you've defined using @apply to group Tailwind classes.

Output File: -o
The "o" option tells Tailwind the output file you want it to generate containing only the classes in the files defined in the purge section of the tailwind.config.js file.

Config File: -c
The "c" option tells Tailwind where your config file lives.

Minify: -m
The "m" option tells Tailwind to minify the output file.

Watch: -w
The "w" option tells Tailwind to watch for changes and causes the command to run until you kill the process.

Installation: Tailwind CLI - Tailwind CSS

Documentation for the Tailwind CSS framework.

Tailwind CSS