TailwindCSS is different than normal CSS frameworks like Bootstrap, Foundation, or Bulma which comes with pre-built components.
TailwindCSS is a utility-first and simple CSS framework.
TailwindCSS does not have pre-built components and default themes instead they have utility classes so that you can build your own components easily and in more customizable ways.
You can learn the following:
To install and configure TailwindCSS in your development machine you can follow the following steps.
First, create the folder where you want to start your tailwind project and then install the tailwindcss
using npm command
mkdir helloword
cd helloword
npm install tailwindcss
Now you can create the css/style.css
inside the helloword
directory and add the following code to it.
@tailwind base;
@tailwind components;
@tailwind utilities;
These @tailwind directories are used by the build process to build the final CSS.
First, we will create the Tailwind configuration file and when you do some advanced work you can edit it.
To create the configuration file you can run the following command.
npx tailwindcss init
You can see the following code inside your tailwind.config.js
.
module.exports = {
future: {
// removeDeprecatedGapUtilities: true,
// purgeLayersByDefault: true,
},
purge: [],
theme: {
extend: {},
},
variants: {},
plugins: [],
}
Now you can build your final CSS file which can be used in your index.html
Update your package.json
with the following code.
"build": "postcss css/style.css -o build/style.css"
Now postcss
will process your input file @css/style.css
and you can see the final output @ build/style.css
You can run this command in your terminal
npm run build
Create index.html
inside the build folder and add the following code to index.html
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Tailwind CSS Demo</title>
</head>
<body>
<div class="h-64">
<div class="p-4 m-4 bg-green-600">
<h1 class="text-2xl font-bold text-white">Tailwind CSS Demo</h1>
</div>
<div class="p-4 m-4 bg-green-300 h-full">
<h2 class="text-green-900">Have much fun using Tailwind CSS</h2>
</div>
</div>
</body>
</html>
Install the live-server
npm install -g live-server
Then start the server to view the index.html
file.
live-server build
Your browser tab will automatically open and show the index.tml
Now we will see how to style a component with TailwindCSS. For example, we can take the button in Twitter Bootstrap
<button type="button" class="btn btn-primary">Primary</button>
We can do the same with tailwindCSS
<button class="bg-blue-500 p-1 rounded text-white">Primary</button>
You can make the responsive HTML page easily with TailwindCSS. You have got some utility to do that.