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==

--

--

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

JavaScript || Reactjs || Nextjs || Nodejs || Python || Front-end Developer