TailwindCSS is different than normal CSS frameworks like Bootstrap, Foundation or Bulma.

TailwindCSS does not have pre-built components and default theme instead they have utility classes so that you can build your own components easily and more customizable ways.

You can learn following:

Installation

To install and configure TailwindCSS in your development machine you can follow the following steps.

1 Install tailwindcss

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

2 Create styles.css file

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 directory is used by the build process to build the final CSS

3 Tailwind configuration file.

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: [],
}

4 Build your CSS file

Now you can build your final CSS file which can be used in your index.html

Update your package.json with 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

5 View the HTML page

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

Component Styling With Tailwind CSS

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>
Bootstrap Buttons

We can do the same with tailwindCSS

<button class="bg-blue-500 p-1 rounded text-white">Primary</button>
TailwindCSS Button

Responsive HTML

You can make the responsive HTML page easily with TailwindCSS. You have got some utlity to do that.

All you need is design to get started!

Get Free Quote