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
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="[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
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
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
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="[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
Now you can see 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 Gradient Button Example
Tailwind CSS 3D Button Example
Tailwind CSS Loading Button Example
Tailwind CSS v3 Cards Examples
Tailwind CSS Checkbox Form Examples
Tailwind CSS Dropdowns (Menu) on Hover Example
Tailwind CSS Multiselect Dropdown Example
How to use dark mode toggle switch in Tailwind CSS 3
How to use @apply directive in Tailwind CSS
Tailwind CSS sticky header & fixed navbar example
Tailwind CSS Navbar UI Example
Tailwind CSS 3 Login Page UI Example
Tailwind CSS Login Modal Example
Tailwind CSS 3 Overlay Image Example
Tailwind CSS Thank You Page Example
Tailwind CSS Timeline UI Example
Tailwind CSS Responsive Footer Section Example
Tailwind CSS Background Image Header Example
