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
Install taillwindcss, postcss-cli and autprefixer
yarn add tailwindcss postcss-cli autoprefixer -D
-D option if to save package to your peerDependencies
Create a default configuration file for tailwindcss
npx tailwind init tailwind.js -full
Create a postcss.config.js file
touch postcss.config.js
Edit postcss.config.js and type
const tailwindcss = require('tailwindcss');
module.exports = {
plugins: [
tailwindcss('./tailwind.js'),
require('autoprefixer')
],
};
Create file tailwind.css as follows
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
Use postcss to generate the stylesheet style.css
npx postcss tailwind.css -o style.css
Use style.css in your HTML project
<html>
<head>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<h1>Hello world</h1>
</body>
</html>
Test it with liveserver
yarn add live-server -D
live-server
Top comments (1)
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?