Setting Up A TailwindCSS Project

To Install Tailwind:
Open your project in Visual Studio Code.
Go to Terminal > New Terminal

Type npm install -D tailwindcss

To Initialize your project, type

npx tailwindcss init

Then create two folders inside your project. Name them 
build and src

In the SRC folder, make a file called 
input.css

In the BUILD folder, make a file called 
index.html

In tailwind.config.js, edit the content array. Inside the square brackets type “build/*.html”

Inside input.css, add the following three lines:
@tailwind base;
@tailwind components;
@tailwind utilities;

Then in the command line type the following and press RETURN

npx tailwindcss -i "src/input.css" -o "build/style.css" --watch

Note: this is all one line: it’s just wrapping here in WordPress.

This starts Tailwind watching your project. Every time you add, modify, or remove a tailwind class in any of the HTML files inside the build folder, Tailwind will compile the associated CSS to your build stylesheet.

Working Later on Your Tailwind Project

Tailwind will need to be running whenever you work on your project. If you have already set up the project before, you just need to run this command again:

npx tailwindcss -i "src/input.css" -o "build/style.css" --watch

Note: TailwindCSS is much easier to work with if you install the TailwindCSS Intellisense extension in Visual Studio Code. This will give you code completion and information on each class, making choosing the correct ones far more intuitive.