How to use Tailwind CSS in HTML
By Emmanuel Chinonso
Technical Writer
Tailwind CSS In Html
Tailwind CSS is a utility-first CSS framework. It provides you with CSS classes that you can use to create designs for your web pages quickly and with ease.
This blog will walk you through the different ways you can add Tailwind CSS in an HTML project, what the limitations could be, what developers that have worked extensively with the Tailwind CSS framework recommend and why, and finally how to properly process Tailwind in your project.
Table of content
- Adding Tailwind CSS
- Adding tailwind CSS via CDN
- Adding tailwind CSS using the package manager
- Installing the latest Tailwind CSS
- Adding tailwind CSS directives to a CSS file
- Setting up the Tailwind configuration file
- Tailwind CSS Processing
- Conclusion
Adding Tailwind CSS
There are usually two ways of adding Tailwind CSS to your HTML project.
- 1. Using the Tailwind CSS CDN
- 2. Adding Tailwind CSS in HTML via the package manager
Tailwind CSS CDN
Adding the Tailwind CSS in an HTML project via the CDN is easier and very beginner friendly. This method allows you to use the Tailwind CSS framework without the need to worry about PostCSS configurations. It is a great way to jumpstart your project. However with these perks come some limitations, some of these limitations are:
- You cannot install third-party plugins
- You cannot customize Tailwind's default theme.
- You get access to all the files even the files you do not need.
- You cannot use any directives like
@apply
, or@variants
. - You cannot enable additional variants like
group-focus
.
For the Tailwind's styles to work properly and to have a great experience with the Tailwind CSS framework, you need to use the HTML5 doctype and include the meta
tags for responsiveness on all devices. Just like the code below demonstrates.
<!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</title> </head> <body></body></html>
To use the Tailwind CSS in an HTML project via the CDN, add this to the head
section of your HTML project.
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.CSS" rel=" stylesheet" />
With the addition of the link above, you will get access to the Tailwind CSS classes that allow us to use its predefined styles in our projects.
Using The Package Manager.
Now, I would suggest if you are building a world application, it would be best to install your tailwind CSS using the package manager. This is because most frameworks make use of PostCSS already, like the auto picker.
In this part of the Tailwind CSS tutorial, we are going to look at how to install Tailwind CSS in HTML using the package manager.
Prerequisites
To get the most out of this section of the tutorial, you need the following:
Node
and its package manager,npm
. You can install it from here. Run the commandnode -v
&&npm -v
to verify you have them installed.- Alternatively, we can use another package manager, Yarn.
Steps in installing tailwind CSS in Html using package manager
- 1. Create our package.json file
- 2. Install Tailwind CSS
- 3. Adding tailwind CSS directives to a CSS file
- 4. Setting up the Tailwind configuration file
- 5. Tailwind CSS Processing
Create our package.json file
A package.json
file is a file that lives in the root directory of our project. It holds important information about your project like the project's name, the project's description, dependencies required by the project, and how npm
should run your project, etc.
To create a package.json
file in your project, go to your terminal, and change the file directory to the folder you want your package.json
file to be created in.
To change the file directory run this command in your terminal.
cd <path to your folder>
Next, we run this npm
or yarn
( if you decided to use the yarn package manager ) command.
npm init
# or
yarn init
With this you would be asked a couple of questions, you can skip these questions by pressing the enter
key.
Installing the latest Tailwind CSS
Next, we install the Tailwind CSS in the HTML project along with the latest PostCSS and autoprefixer using the command below
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
Adding tailwind CSS directives to a CSS file
The next step in adding tailwind CSS in an HTML project is to create a file called main.css
in the root folder of your application and write the following code to give your application the tailwind CSS utilities.
/* ./your-css-folder/main.css */
@tailwind base;@tailwind components;@tailwind utilities;
Setting up the Tailwind configuration file
Setting up Your Tailwind CSS configuration is an important step in adding Tailwind CSS to an HTML project.
The chances are that you would want to use your configuration when building your application. The configuration file makes it easy to customize the classes in Tailwind CSS by changing any fonts, color, spacing, etc.
To override the default classes when using Tailwind, run the following command in your terminal to create a tailwind.config.js
file.
npx tailwind css init
In the new config file, you can go ahead to configure them by writing the following code on them.
// tailwind.config.jsmodule.exports = { purge: [], darkMode: false, // or 'media' or 'class' theme: { extend: {}, }, variants: {}, plugins: [],};
Tailwind CSS Processing
The final step in adding Tailwind CSS in the HTML file using the package manager is to add plugins inside the configuration file and run them, which will process the configuration file and the style.css file.
module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, },};
Now, you can go ahead to run the following command on your terminal.
next tailwind CSS build style.css –o output.css
This will generate a new CSS file called output.css
. We then include this output.css
file in our HTML file, the same way we include a normal CSS file by adding this line of code
<link href = “./output.CSS” rel = “stylesheet”>
With that, you can now use Tailwind CSS in the HTML project. you can go ahead to build your application.
Conclusion
In this Tailwind CSS tutorial, we covered how to add Tailwind CSS in an HTML file using different methods through the Tailwind CSS CDN and Package manager. With this information, You should be able to easily jump-start using this framework in a matter of minutes.
Build modern projects using Bootstrap 5 and Contrast
Trying to create components and pages for a web app or website from
scratch while maintaining a modern User interface can be very tedious.
This is why we created Contrast, to help drastically reduce the amount of time we spend doing that.
so we can focus on building some other aspects of the project.
Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants.
Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for
building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.
Related Posts