In this post I'm going to explain the easiest way to add TailwindCSS to your HTML project.
Tailwind is a utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.
Let's dive in:
You can follow the following steps:
Initialize the project;
npm init
Install Tailwind CSS to the project
npm install tailwindcss
Create file in the src folder e.g tailwind.css
This file will contain the import base functionality of Tailwind
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
Create a default configuration file for Tailwind
This will generate a fully compiled Tailwind CSS file
Style customization is done in this file
npx tailwindcss -cli@latest init --full
Register scripts and generate the stylesheet style.css
In the package.json file under the "build-css" write the following code
"build-css": "tailwindcss build src/tailwind.css -o styles.css"
{
"name": "tailwind-projec",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"build-css": "tailwindcss build src/tailwind.css -o styles.css"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"tailwindcss": "^2.1.2"
},
"description": ""
}
src/tailwind.css - this is where you imported the base functionality of tailwind.
style.css - after building a stylesheet with the name will be created
Run
npm build-css
This will build the required tailwind scripts and generate the stylesheet
Add the stylesheet to your HTML project to get started
<html>
<head>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<h1>Happy coding!!!!</h1>
</body>
</html>
After any customization please run the following command
npm build-css
Happy Coding!!!!!!🍻