Guide to TailwindCSS for your next PSD to Bootstrap project

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:

Installation
- Using NPM
- Using CDN
Component Styling with TailwindCSS

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 directories are 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 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

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>

We can do the same with tailwindCSS

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

Responsive HTML

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

Guide to TailwindCSS : For PSD to Responsive HTML