How to Install & Setup Tailwind CSS

Tailwind CSS v3 is packed with new features to streamline your development process. In this guide, we’ll cover how to install Tailwind CSS v3 and use plugins to enhance your projects. Get ready to elevate your web design effortlessly!

Tailwind CSS v3.0 CDN (for development and test purposes)

Using CDN

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tailwind CSS v3 CDN</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <div class="flex justify-center">
        <div class="shadow shadow-red-200 p-4">
            <h3 class="text-lg font-bold">Tailwind 3 </h3>
            <p>Lorem ipsum dolor</p>
        </div>
    </div>
  </body>
</html>
tailwind css cdn

Using plugin in tailwind v3 CDN

In Tailwind CSS v3 you use first part plugin with CDN. First-party plugins can be automatically loaded using the plugins query parameter:

index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tailwind CSS v3 CDN with plugins</title>
    <script src="https://cdn.tailwindcss.com/?plugins=forms,typography,aspect-ratio,line-clamp"></script>
</head>

<body>
    <div class="flex justify-center">
        <div class="py-12">
            <h2 class="text-2xl font-bold">Tailwind v3 with form plugin</h2>
            <div class="mt-8 max-w-md">
                <div class="grid grid-cols-1 gap-6">
                    <label class="block">
                        <span class="text-gray-700">Full name</span>
                        <input type="text" class="mt-1 block w-full" placeholder="" />
                    </label>
                    <label class="block">
                        <span class="text-gray-700">Email address</span>
                        <input type="email" class="mt-1 block w-full" placeholder="[email protected]" />
                    </label>
                    <label class="block">
                        <span class="text-gray-700">When is your event?</span>
                        <input type="date" class="mt-1 block w-full" />
                    </label>
                    <button class="
                block
                py-2
                rounded
                bg-cyan-600
                text-cyan-100
                shadow-lg shadow-cyan-300
              ">
                        Submit
                    </button>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
tailwind v3 CDN plugin

Install Tailwind CSS v3 with Tailwind CLI

Install Tailwind CSS

Install tailwindcss via npm,

npm install -D tailwindcss

Next, run below command to create tailwind.config.js file.

npx tailwindcss init

Next, Configure your template paths.

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

Add the Tailwind directives to your CSS.

src/input.css
@tailwind base;
@tailwind components;
@tailwind utilities;

Start the Tailwind CLI build process.

npx tailwindcss -i ./src/input.css -o ./src/output.css --watch

For minify css file run below command.

npx tailwindcss -i ./src/input.css -o ./dist/output.css -m
src/index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>tailwind css v3 via npm</title>
    <link href="../dist/output.css" rel="stylesheet" />
  </head>
  <body>
    <div class="container mx-auto mt-20 space-x-6 ml-96">
      <button class="px-6 py-2 rounded shadow text-cyan-100 bg-cyan-500 shadow-cyan-500/50">
        Button
      </button>
      <button class="px-6 py-2 text-blue-100 bg-blue-500 rounded shadow shadow-blue-500/50">
        Button
      </button>
      <button class="px-6 py-2 text-indigo-100 bg-indigo-500 rounded shadow shadow-indigo-500/50">
        Button
      </button>
    </div>
  </body>
</html>
Tailwind CLI

Using plugin in tailwind CSS

Setup form plugin in tailwind css

# Using npm
npm install @tailwindcss/forms

# Using Yarn
yarn add @tailwindcss/forms
tailwind.config.js
/** @type {import('tailwindcss').Config} */
const plugin = require('tailwindcss/plugin')

module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [
   require('@tailwindcss/forms'),
  ],
}

After setup form plugin in config you can use plugin forms class.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>tailwind css v3 form plugin via npm</title>
    <link href="../dist/output.css" rel="stylesheet" />
  </head>
  <body>
    <div class="flex justify-center mt-20">
      <div class="py-12">
        <h2 class="text-2xl font-bold">Tailwind v3 with form plugin</h2>
        <div class="max-w-md mt-8">
          <div class="grid grid-cols-1 gap-6">
            <label class="block">
              <span class="text-gray-700">Full name</span>
              <input type="text" class="block w-full mt-1" placeholder="" />
            </label>
            <label class="block">
              <span class="text-gray-700">Email address</span>
              <input
                type="email"
                class="block w-full mt-1"
                placeholder="[email protected]"
              />
            </label>
            <label class="block">
              <span class="text-gray-700">When is your event?</span>
              <input type="date" class="block w-full mt-1" />
            </label>
            <button
              class="block py-2 rounded shadow-lg bg-cyan-600 text-cyan-100 shadow-cyan-300"
            >
              Submit
            </button>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
tailwind css v3 form plugin via npm

For more tailwind cli tool details you can run below command.

npx tailwindcss -help    
tailwindcss v3.0.0

Usage:
  tailwindcss build [options]

Options:
  -i, --input       Input file
  -o, --output       Output file
  -w, --watch       Watch for changes and rebuild as needed
    --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

2 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *