Create a Tailwind Project

Create a project folder (I called mine tailwind, but call it whatever you want).

Then open a terminal and cd into the project folder.

Initialize an NPM project by running this command:

npm init -y

Install tailwind with this command (it can be saved as a dev dependency - you could use -D instead of --save-dev):

npm install tailwindcss --save-dev

Create a src folder in the project folder.

Create a main.css file in the src folder and put this code in it:

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

Create a public folder in the project folder.

Create an index.html page in the public folder and put this code in it:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CSS</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <h1 class="bg-red-500">Hello Tailwind</h1>
</body>
</html>

Note that the page links to the main.css file in the public folder, and this style sheet will get generated when we use Tailwind to compile the main.css file in the src folder (in a minute).

Also note that the H1 element is using a Tailwind class (bg-red-500).

You may want to add an images folder to the public folder so that you can play with some images (put some images in it).

Create a tailwind config file by running this command:

npx tailwindcss init --full

The --full option adds all the default values to the config file. You could change these settings if you wanted. I think that the best way to learn Tailwind, and realize it's power is to start fiddling with all the options that are available in the 'full' config file.

You could also add your own settings, and you can even define your own components!!!

You need to update the content property in the config file to tell it where to look for files that may contain Tailwind classes:

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ["./public/index.html","./src/**/*.{html,js}"],
    // I OMITTED ALL THE REST OF THE CONFIG SETTINGS HERE
}

Note that we only need it to look in public/index.html right now. But usually you have other files in the src folder that may make use of Tailwind classes (the second entry will make sure that all .html and .js files will be searched for the use of Tailwind classes).

Now, if you run this command from the project folder, it will compile the main.css file in the src folder into a main.css file in the public folder (the o flag stands for 'output'):

tailwindcss build src/main.css -o public/main.css

NOTE: It seems that in the latest version of tailwind you should replace build with -i.

tailwindcss -i src/main.css -o public/main.css

As a shortcut, add a script to to the package.json file, so that you don't have to remember the previous command:

"tw": "tailwindcss -i src/main.css -o public/main.css"

Now all you have to do to compile your code with Tailwind is enter this command in the terminal:

npm run tw

If you run the index.html page in the Live Server extension, you should see that the Tailwind classes are used in the page.

Other things to explore in Tailwind:

  1. adding your own classes
  2. overriding settings in the config file
  3. creating your own component classes
  4. explore darkmode
  5. explore the media settings (breakpoints for media queries)
  6. installing google fonts (in net ninja video)