This guide aims to simplify the process of installing Tailwind CSS in a project, providing options for both Vite or CLI. Tailwind CSS is a utility-first CSS framework, while Vite is a fast build tool optimized for development experience.
- Prerequisites
- Initialize a New Project
- Install Necessary Dependencies
- Configure Tailwind
- Set Up Stylesheet
- Run the Development Server
- Create an HTML File
- Appendix
- Node.js and npm installed on your machine
- Basic understanding of JavaScript, HTML, and CSS
- Access to a terminal or command-line interface
Vite Option
- Open your terminal and navigate to the directory where you want to create a new project.
- Run the following command:
npm create vite@latest- Choose your project name, template as
Vanilla, and language asJavaScript.
CLI Option
- Open the terminal and navigate to your desired directory.
- Run the command:
npm init -yVite Option
- Navigate to your project folder and install dependencies:
cd your-project-name
npm installCLI Option
- Navigate to your project folder.
Common Step for Both 2. Install Tailwind CSS, and Autoprefixer:
npm install -D tailwindcss- Initialize Tailwind:
npx tailwindcss init- Edit
tailwind.config.jsas follows:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}Vite Option
- Update your stylesheet (
style.css) with the following:
@tailwind base;
@tailwind components;
@tailwind utilities;CLI Option
- Create a new CSS file in the
/distdirectory, namedmain.css. - Add the following to
main.css:
@tailwind base;
@tailwind components;
@tailwind utilities;Vite Option
npm run devCLI Option
- Update your
package.jsonscript:
"build": "tailwindcss -i ./dist/main.css -o ./src/output/style.css -w"- Run the build script:
npm run buildCreate and style an index.html file for either option. Make sure to link the stylesheet generated by Tailwind.
Example HTML
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="output/style.css" rel="stylesheet">
</head>
<body>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</body>
</html>Example HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<!-- Your Tailwind-enabled HTML goes here -->
<!-- <div id="app"></div> -->
<script type="module" src="/main.js"></script>
</body>
</html>By following these steps, you can install Tailwind CSS either with Vite or CLI according to your project's needs.