Geek Culture
Published in

Geek Culture

How to use Tailwind CSS on static HTML (with bonus at the end)…

How to use Tailwind CSS on static HTML (with bonus at the end)…

Install Tailwind CSS via NPM

Although it requires a bit more setup and it requires further knowledge of the terminal and JavaScript, it is most definitely the best way to make use of all of the features that Tailwind CSS can provide.

First of all, you need to make sure that you have Node and NPM installed on your machine. If you do, create a project folder and run the following command in the root directory of your project to initialize the NPM configuration file:

npm init

Afterward, install Tailwind CSS using the following command:

npm install tailwindcss --save

This will add Tailwind CSS as a project dependency, and also install the library files inside the node_modules folder. The --save tag ensures that the library is added to the package.json file.

Create the main CSS file

Now that you have Tailwind CSS installed on your project folder, create a main.css file and add the following code to inject the Tailwind CSS code:

@tailwind base;@tailwind components;@tailwind utilities;

Setup the Tailwind configuration file

This is an important step to set up a configuration file for Tailwind CSS so that you can later easily customize the classes by modifying and adding new colors, fonts, sizings, shadows and so on refere to TailwindCSS Configuration for more informations about customization.

Run the following command in your terminal to generate a tailwind.config.js file:

npx tailwindcss init

By running this command, a new configuration file called tailwind.config.js will be generated with the following code:

// tailwind.config.js
module.exports = {
future: {},
purge: [],
theme: {
extend: {},
},
variants: {},
plugins: [],
}

Processing Tailwind CSS

The last step to include Tailwind CSS into HTML using the recommended PostCSS method is to add the following to plugins inside the configuration file and then run the command that will process your configuration file and the main.css file:

module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
]
}

And run the following command in your terminal to process your files:

npx tailwindcss build main.css -o output.css

This will generate a new CSS file called output.css which you need to include in your HTML file. All you need to do now is to add the following code in your HTML template:

<link href=”./output.css” rel=”stylesheet”>

Congratulations! Now you should have Tailwind CSS included in your HTML using the recommended method.

Bonus: Agencia — Free Creative Landing Page HTML5 Template using Tailwind CSS 🎉🎉🎉🎉

Agencia — Free Creative Landing Page HTML5 Template using Tailwind CSS | Themeptation

https://www.themeptation.net/product/WGD8ZTICuCcbzuImw_FzWg==

A new tech publication by Start it up (https://medium.com/swlh).

Recommended from Medium

honey-sugar-scrub-tay-da-chet-sinh-hoc-giup-da-trang-sang

The Beauty of Python — Part 2

CS373 Fall 2021: Blog 10

PyCharm professional remote Ubuntu Bionic desktop setup for GPU usage in MacBook Pro 2020

How Does a Website Get its Data, and Why Does it Matter?

Pricess Bride Meme: You keep using the word “Serverless,” I do not think it means what you think it means.

We are soon Listing it token into big exchanges, UT token going to best project of all time, Stay…

Our favourite talks from Krk.rb 🇵🇱

Query Filters in Laravel

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Said BADAOUI

Said BADAOUI

FullStack Developer :)

More from Medium

Customize the Apostrophe Admin UI

Upgrade your Tailwind CSS project to version 3.0

Installing and using Tailwind CSS 3.0

Installing Tailwind CSS 3.0

How to build a Tailwind CSS pagination component with Flowbite