DEV Community

Cover image for How to add tailwindcss to a simple HTML Project 🍵
Raphael MANSUY
Raphael MANSUY

Posted on

How to add tailwindcss to a simple HTML Project 🍵

How to add tailwindcss to a simple HTML Project

This article explains how to add Tailwindcss stylesheet to an HTML project. Tailwind CSS is a highly customizable, low-level CSS framework that gives you all the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

To add Taillwind CSS to an HTML project, you can follow these steps:

Initialize a project

yarn init
Enter fullscreen mode Exit fullscreen mode

Install taillwindcss, postcss-cli and autprefixer

yarn add tailwindcss postcss-cli autoprefixer -D
Enter fullscreen mode Exit fullscreen mode

-D option if to save package to your peerDependencies

Create a default configuration file for tailwindcss

npx tailwind init tailwind.js -full
Enter fullscreen mode Exit fullscreen mode

Create a postcss.config.js file

touch postcss.config.js
Enter fullscreen mode Exit fullscreen mode

Edit postcss.config.js and type

const tailwindcss = require('tailwindcss');
module.exports = {
    plugins: [
        tailwindcss('./tailwind.js'),
        require('autoprefixer')
    ],
};
Enter fullscreen mode Exit fullscreen mode

Create file tailwind.css as follows

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";
Enter fullscreen mode Exit fullscreen mode

Use postcss to generate the stylesheet style.css

npx postcss tailwind.css -o style.css
Enter fullscreen mode Exit fullscreen mode

Use style.css in your HTML project

<html>
 <head>
    <link rel="stylesheet" href="style.css"/>
    </head>
 <body>
     <h1>Hello world</h1>
</body>
</html>

Enter fullscreen mode Exit fullscreen mode

Test it with liveserver

yarn add live-server -D
Enter fullscreen mode Exit fullscreen mode
live-server 
Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
 
zackplauche profile image
Zack Plauché

This was perfect.

Would you be able to edit this and add the links to the docs where you found the different parts of this as well?