What is Tailwind CSS

Introduction

How is it different from Bootstrap or Bulma etc.? 🤔

How is this advantageous over other frameworks?

1. If you use other frameworks, say Bootstrap, your site feels Bootstrap-y. It means one can easily tell it is built using Bootstrap (which of course is not a problem) but it looks very similar to thousand other sites built using the same framework. This is not a problem with Tailwind CSS because it doesn’t give you pre-defined components to use. You can use tailwind utility-classes in any combination to create your own UI components. See below how to do so.

2. To overcome the above problem, you have one solution: override styles. If you have ever done this before, you know that this gets out of hand pretty fast. This is not a problem with Tailwind CSS.

3. You solve one of the 2 hardest things of computer science: naming things, here making up class names. As iterated earlier, Tailwind CSS gives you utility classes which you can use to create your styles without worrying about class names invention.

4. Responsive by design: If you use Tailwind CSS, you don’t need to write custom styles for handling responsiveness for different screen sizes. You can use Tailwind’s responsive utilities to handle it easily. We will see that below.

5. Pseudo classes: We can style elements on hover, focus etc. similar to how we do responsive design in Tailwind CSS.

6. And a lot more! - New features are always getting added like Dark mode support, animations etc.

Getting Started with Tailwind CSS

Using the CDN:

<link  href="<https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css>"  
rel="stylesheet"/>

Installing it via npm:

1. In order to use it, you have to first install Tailwind CSS via npm.

npm install tailwindcss -D # -D installs it as a dev dependency

2. Create a tailwind config file: This file is used to configure and customize tailwind to your liking.

npx tailwindcss init

This creates tailwind.config.js in the root of your project.

module.exports = {  
		future: {},  
		purge: [],  
		theme: {    
			extend: {}, 
		 },  
		variants: {},  
		plugins: [],
};

3. Add Tailwind CSS to your CSS: Create a CSS file with the following contents and import it.

@tailwind base;
@tailwind components;
@tailwind utilities;

4. Using Tailwind with PostCSS: Tailwind CSS is a PostCSS plugin meaning you have to create a postcss.config.js file in the root of your project:

module.exports = {  
plugins: [    
	// ...    
	require("tailwindcss"),    
	require("autoprefixer"),   
	 // ...  
	]
};

In production, to decrease the CSS bundle size, it is recommended to use purge the unused CSS. You can find more information here.

Using Tailwind CSS

// tailwind.config.js
module.exports = {
        theme: {
            colors: {
                indigo: '#5c6ac4',
                blue: '#007ace',
                red: '#de3618',
         }
}

<p class="font-bold lg:font-semibold">  
	Hello, I am a paragaph styled using Tailwind CSS.
</p>

Examples:

1. HTML:

<button class="px-4 py-2 font-semibold bg-blue-400 rounded">Click Me</button>

1. HTML (this example is taken from the docs itself):

<div class="md:flex">
    <div class="md:flex-shrink-0"> <img class="rounded-lg md:w-56" src="https://bit.ly/34e2djy" alt="Woman paying for a purchase" /> </div>
    <div class="mt-4 md:mt-0 md:ml-6">
        <div class="text-sm font-bold tracking-wide text-indigo-600 uppercase"> Marketing </div> <a href="#" class="block mt-1 text-lg font-semibold leading-tight text-gray-900 hover:underline"> Finding customers for your new business </a>
        <p class="mt-2 text-gray-600"> Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your first customers. </p>
    </div>
</div>

1. HTML (blog post listing on my blog):

<div class="px-4 py-4 mb-3 font-normal bg-gray-300">
    <div class="flex flex-col justify-between md:flex-row">
        <h3 class="mb-2 text-2xl font-semibold leading-snug"> Use TailwindCSS with Gatsby (with Emotion or styled-components) </h3>
        <div class="flex items-center mb-2 space-x-2">
            <p class="px-2 text-gray-200 bg-blue-600 rounded">#gatsby</p>
            <p class="px-2 text-gray-800 bg-teal-400 rounded">#tailwindcss</p>
            <p class="px-2 text-gray-200 bg-purple-600 rounded">#css</p>
        </div>
    </div>
    <p class="text-gray-700"> Learn how to use TailwindCSS with Gatsby along with Emotion or styled-components perfectly. </p>
</div>

Using Tailwind CSS with React:

<Card
  imgSrc="https://bit.ly/31lfllc"
  imgAlt="Hotel California"
  title="Welcome to Hotel California"
  pricing="$259 USD/ night"
  url="/hotel/california-hotel"
/>

function Welcome({ imgSrc, imgAlt, title, pricing, url }) {
  return (
    <div>
      <img className="rounded" src={imgSrc} alt={imgAlt} />
      <div className="mt-2">
        <div>
          <div className="font-bold leading-snug text-gray-700">
            <a href={url} className="hover:underline">
              {title}
            </a>
          </div>
          <div className="mt-2 text-sm text-gray-600">{pricing}</div>
        </div>
      </div>
    </div>
  );
}

Happy Coding! 👨‍💻