In this short article, you will learn how to create a simple HTML project using TailwindCSS.
What makes Tailwind great?
Tailwinds makes life so much easier for people struggling with vanilla css. Tailwind provides low-level utility classes, that enables you to make unique designs without leaving your html file. For more information read the official documentation.
How to add tailwind to your project?
1. Install Node
Before installing tailwind, you need to have node installed on your computer. Node comes with a package manager (NPM) which is used to manage dependencies.
To check if node is available on your computer, open a terminal and type these command:
node -v
In the case where node is missing from your computer, go to the official website of node and Download it
2. Create a project
To create a project we simply need to create a folder. Open a terminal on your computer and type the following commands:
We will be creating our project on the desktop, the cd command is used to move between directories
cd Desktop
The mkdir command is used to create a new directory, and in this case we are creating a new folder named tailwindProject
mkdir tailwindProject
Inside the folder we just created, we need to add a few more folders (src and styles folder)
cd tailwindProject
This command creates two folder inside the tailwindProject directory
mkdir src styles
3. Installing Tailwind CSS using NPM
In the terminal type this command:
npm install -D tailwindcss
Tailwind comes with a configuration file used to customize tailwind theme; such as adding custom colors, fonts, and many other stuff. To create to tailwind config file, you simple need to run this command:
npx tailwindcss init
And then open your project with your favorite code editor. If you are using vscode, you can simply type this command in the terminal and it will automatically open your project
code .
4. Configure your template paths
The configuration file is used to tell tailwind where to find template files which are using tailwind classes; this is important because tailwind uses that path to scan your html file for classes which will then be added to your style sheet.
Inside your tailwind.config.js file, which was created in the step 3, add the path to your html files in the content.
In my case all my html file will be stored in the src folder which was created in the previous steps.
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
5. Add the Tailwind directives to your CSS
Inside the styles folder, create a CSS file named tailwind.css or any name of your choice. And add the following:
@tailwind base;
@tailwind components;
@tailwind utilities;
Apart from the directives of tailwind, you can also use that file to add any custom CSS.
6. Start the Tailwind CLI build process
You are almost done, the next step involves building the css file containing utility classes.
6.1 Open package.json file
And add the following script:
"scripts":{
"dev":"npx tailwindcss -i ./styles/tailwind.css -o ./styles/output.css --watch"
},
The above script uses the file containing the tailwind directives as an input, and create a css containing all the utility classes being used in the project.
6.2 Run the script
Inside the terminal, type this command
npm run dev
In addition, that command will be used every time you start working on your project.
7. Start using Tailwind in your HTML
Open the project in your favorite code editor and start writing some html code. Most importantly, don't forget to link the stylesheet to the output.css file.
<!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 href="/styles/output.css" rel="stylesheet"/>
<title>Tailwind Starter</title>
</head>
<body class="bg-gray-800">
<div class="text-center mt-12">
<h1 class="text-4xl text-yellow-500 font-bold">Heap Heap Arrayy!</h1>
<p class="text-xl text-white mt-4"> I have created my first html project using tailwind. </p>
</div>
</body>
</html>
8. Test it with live server
Open your code in the browser, and check if everything works. If the css styles are not showing, then you probably missed a step. You can double check your file structure with the file i used in creation this tutorial TailwindProject
Thank you for reading
if you have any questions, feels free to reach me through twitter @khazifire. And don't forget to follow for more similar content.
Top comments (2)
Not sure if something changed since creating this document but you must add "js" in your content path for it to work properly. Image attached.
content: ["./src/*/.{html, js}"]
thanks for pointing that out, I have updated