TailwindCSS is not only designed for frameworks but can also be used in a simple HTML project. Instead of writing custom CSS, you can get the benefits of TailwindCSS in your static website. Here are 5 simple steps to add TailwindCSS in a simple HTML project and use it.
Pre-requisite to Install TailwindCSS
If you haven’t installed node js, download it from the official website. Make sure you download the LTS version from the site. Node JS comes with NPM which is required to install TailwindCSS CLI and install node modules required for Tailwind to work.
Step 1: Install TailwindCSS CLI and Create Config File
Next, you need to install TailwindCSS CLI globally or as a dev dependency. This CLI will be then used to create a config file and run the TailwindCSS compiler. You can install it as a dev dependency or as a global package in your system.
1 2 3 4 5 6 7 8 9 |
// as global (recommended) npm install -g tailwindcss // as dev dependency npm install -D tailwindcss |
Now, create a config file (tailwind.config.js
) with the following command.
1 2 3 4 5 |
npx tailwindcss init |
Step 2: Add File Paths to Content Array in Config
After creating a config file add your folder path with file extensions that you want to scan through while working. In this example, only HTML files are used as content so the content array only includes HTML file paths. Check the example below and modify it according to your project structure.
1 2 3 4 5 6 7 8 9 10 11 12 |
/** @type {import('tailwindcss').Config} */ module.exports = { content: ["*.html"], theme: { extend: {}, }, plugins: [], } |
Step 3: Create an Input File with Tailwind Directive
The second step in adding TailwindCSS to an HTML project is to create a .css
file input file with 3 basic TailwindCSS directives. Name your file whatever you want and add these @tailwind base
@tailwind components
@tailwind utilities
. In this example, the input file is named tailwind-input.css
.
1 2 3 4 5 6 7 |
@tailwind base; @tailwind components; @tailwind utilities; |
Step 3: Run TailwindCSS Compiler to Watch Changes
After you add the input file, you have to run the tailwind compiler so that it starts watching changes in your HTML files to generate the CSS file. You have to specify the input path and output path for the compiler to run properly. Open a new terminal window in the root directory of your project and run the following command. This command will start the tailwind compiler assuming that you have a CSS file in the root directory.
1 2 3 4 5 |
npx tailwindcss -i ./tailwind-input.css -o ./tailwind-output.css --watch |
This command will start watching your changes in HTML files. Don’t close this terminal window otherwise, tailwind wouldn’t scan your changes.
Step 5: Import TailwindCSS Output File in HTML
In the end, create an HTML file and import the output file generated by the tailwind compiler to utilize the power of TailwindCSS classes. The following code snippet imports the output CSS file and uses TailwindCSS classes in HTML.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!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" /> <link rel="stylesheet" href="tailwind-output.css" /> <title>Install TailwindCSS</title> </head> <body> <h1 class="text-3xl font-bold text-blue-700 text-center mt-20"> Welcome to CSSTailwind.com </h1> </body> </html> |
The example code is available on this repository.
What’s next?
As you have used TailwindCSS in a simple HTML project, you might need to learn more about Tailwind. There are many things you might need for your project. You can read more about the following topics.
- How to Add Background Image in TailwindCSS
- How to Use Google Fonts in TailwindCSS
- How to Add Gradient Background in TailwindCSS
- How to Add Custom CSS in TailwindCSS