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>
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>
Install Tailwind CSS v3 with Tailwind CLI
Install Tailwind CSS
Install tailwindcss via npm,
npm install -D tailwindcssNext, run below command to create tailwind.config.js file.
npx tailwindcss initNext, 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 --watchFor minify css file run below command.
npx tailwindcss -i ./src/input.css -o ./dist/output.css -msrc/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>
Using plugin in tailwind CSS
Setup form plugin in tailwind css
# Using npm
npm install @tailwindcss/forms
# Using Yarn
yarn add @tailwindcss/formstailwind.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>
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