How to install & setup Tailwind CSS v3

In this section we will install tailwindcss version v3. Also we will also see how to use plugin in Tailwind CSS 3.0.


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 3 CDN

Tailwind CSS 3 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 mt-20">
      <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="john@example.com"
              />
            </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

tailwind v3 CDN plugin


Read Also: How to install Tailwind CSS 3 in React


Install Tailwind CSS v3 with Tailwind CLI tool.

First you need to create tailwind project structure.

start tailwind v3 project structure

start tailwind v3 project structure

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

module.exports = {
  content: ["./src/**/*.html"],
  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 ./dist/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 css v3 via npm

tailwind css v3 via npm


Using plugin in tailwind CSS v3

Setup form plugin in tailwind v3

# Using npm
npm install @tailwindcss/forms

# Using Yarn
yarn add @tailwindcss/forms


tailwind.config.js

const plugin = require('tailwindcss/plugin')

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


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

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 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="john@example.com"
              />
            </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

tailwind css v3 form plugin via npm


Now you can see tailwind v3 project folder structure

tailwind v3 project folder structure

tailwind v3 project folder structure

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


Read Also

Tailwind CSS 3 FAQ Accordion UI Example

Tailwind CSS 3 Alert Message Example

Tailwind CSS 3 Avatars Example

Tailwind CSS 3 Breadcrumb Example

Tailwind CSS v3 Button Examples

Tailwind CSS v3 Cards Examples

How to use dark mode toggle switch in Tailwind CSS 3

Tailwind CSS 3 Login Page UI Example