Getting started with Tailwind CSS

Before we start with the tailwind CSS, let me tell you why you should use it?

Tailwind CSS provides us various utility classes that can be composed to build any design, directly in your markup.

Let's take an example, we have to style div and its content using the traditional way & using Tailwind CSS.

Traditional Way -

<div class="chat-notification">
  <div class="chat-notification-logo-wrapper">
    <img class="chat-notification-logo" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div class="chat-notification-content">
    <h4 class="chat-notification-title">ChitChat</h4>
    <p class="chat-notification-message">You have a new message!</p>
  </div>
</div>

<style>
  .chat-notification {
    display: flex;
    max-width: 24rem;
    margin: 0 auto;
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: #fff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  .chat-notification-logo-wrapper {
    flex-shrink: 0;
  }
  .chat-notification-logo {
    height: 3rem;
    width: 3rem;
  }
  .chat-notification-content {
    margin-left: 1.5rem;
    padding-top: 0.25rem;
  }
  .chat-notification-title {
    color: #1a202c;
    font-size: 1.25rem;
    line-height: 1.25;
  }
  .chat-notification-message {
    color: #718096;
    font-size: 1rem;
    line-height: 1.5;
  }
</style>

Tailwind Way -

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
  <div class="flex-shrink-0">
    <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div>
    <div class="text-xl font-medium text-black">ChitChat</div>
    <p class="text-gray-500">You have a new message!</p>
  </div>
</div>

As you can see with the above example, Tailwind CSS can decrease our lot of efforts with just utility classes.

Now, you are aware of the power of Tailwind CSS so let's set up it in your React project.

Step - 1

Create react-app and install the Tailwind CSS.

npx create-react-app tailwind-app
cd tailwind-app

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Step - 2

CRA does not allow us to override the postCSS configuration so for that we need to install craco

npm install @craco/craco

After installing craco, we need to update the start, build & test script of package.json.

  {
    ...
    "scripts": {
     "start": "craco start",
     "build": "craco build",
     "test": "craco test",
      "eject": "react-scripts eject"
    },
  }

Now, create craco.config.js file in the root directory of the project and add the below text into it.

// craco.config.js
module.exports = {
  style: {
    postcss: {
      plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
      ],
    },
  },
}

Step - 3

Generate tailwind.config.js file by using the below command.

npx tailwindcss-cli@latest init

Now, in tailwind.config.js update the purge option with the paths to all of your components so Tailwind can tree-shake unused styles in production builds.

  module.exports = {
    purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [],
  }

Step - 4

Just add the below dependencies in your index.css and import the file inside index.js.

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

Now, you're good to go ahead and use Tailwind CSS in your project.

Below are some useful links that can be used while using tailwind.

Conclusion

Tailwind CSS can make your work super easy if you know how to use it in the best way. Give some time in learning and loving Tailwind CSS and then there will be no going back.

Please comment if you've any queries regarding this blog. Give your feedback.

ThankYou for reading :)

Ashish's Blog

Ashish's Blog

Getting started with Tailwind CSS

Traditional Way -

Tailwind Way -

Conclusion