Front End, Tutorials, CSS

Learn Tailwind CSS - Full Tutorial with Code

January 10,2023

In this post we'll teach you how to get started with Tailwind CSS, the highly popular CSS framework that allows you to create beautiful responsive web pages fast!

Make sure to watch the video version above, and don't forget to hit the like button and subscribe to our Youtube Channel.

Resources

Download the source code for the project.
Check out Tailwind's official documentation

Tailwind Installation

NPM installation

In this video we use the npm installation, which is the most recommended one for production. See the basic steps below:


1. Install tailwindcss via npm, and create your tailwind.config.js file.
terminal
npm install -D tailwindcss
npx tailwindcss init

2. Configure your template paths
tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

3. Add the Tailwind directives to your CSS
src/input.css
@tailwind base;
@tailwind components;
@tailwind utilities;

4. Start the Tailwind CLI build process
terminal
npx tailwindcss -i ./src/input.css -o ./src/output.css --watch

This command will watch for changes in your files and generate the output CSS file.

Important: You need to run this command every time you open your project on VS Code.

5. Create Your own build function (Optional)
tailwind.config.js
{
  "scripts": {
    "gen": "npx tailwindcss -i ./src/input.css -o ./src/output.css --watch"
  }
}

Now instead of typing the long code shown on step 4, every time you open your project, you can just run:

terminal
npm run gen

6. Start using Tailwind in your HTML
index.html
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="/src/output.css" rel="stylesheet">
  </head>
  <body>
    <h1 class="text-3xl font-bold underline">
      Hello world!
    </h1>
  </body>
</html>

CDN installation

If you are not comfortable using NPM and Node.js you can also use the CDN installation to get started quickly.

Just add the Tailwind script to the head sectioin of your html file:

index.html
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <h1 class="text-3xl font-bold underline">
      Hello world!
    </h1>
  </body>
</html>
Share
Ivan Lourenço Gomes

Ivan Lourenço Gomes

Top-Rated Online Instructor

Ivan is the founder of Daweb Schools and top Udemy instructor currently teaching 17 courses in 4 languages with 420.000+ students worldwide.

Prev

Learn Vue JS in Under 40 Minutes

Related Blogs