Loading
MindXchange
MindXchange
MindXchange

Quipoin Menu

Learn • Practice • Grow

Tutorial Exercises MCQs Interview Q & A Tests
react / Tailwind CSS with React
tutorial
ExercisesInterview QsMCQVideosDiscussion

Tailwind CSS with React

Tailwind CSS is a utility-first CSS framework that has taken the frontend world by storm. Instead of writing custom CSS, you compose styles by applying small, single-purpose utility classes directly in your markup.

What is Tailwind CSS?

Tailwind CSS provides hundreds of pre-built utility classes like `flex`, `pt-4`, `text-center`, and `bg-blue-500`. You combine these classes to build any design without leaving your HTML/JSX. It's highly customizable and promotes consistency.

Think of Tailwind as a giant set of building blocks. You don't write the blocks yourself; you just arrange them to create your design.

Setting Up Tailwind with React

  1. Install Tailwind via npm.
  2. Create Tailwind config files.
  3. Add the Tailwind directives to your CSS.
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
<!-- in your main CSS file, e.g., index.css -->
@tailwind base;
@tailwind components;
@tailwind utilities;

Basic Usage
function Card() {
  return (
    <div className="max-w-sm rounded overflow-hidden shadow-lg p-6 bg-white">
      <h2 className="text-xl font-bold mb-2">Hello Tailwind!</h2>
      <p className="text-gray-700 text-base">
        This is a simple card built with Tailwind CSS utilities.
      </p>
      <button className="mt-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
        Click me
      </button>
    </div>
  );
}

Responsive Design

Tailwind uses responsive prefixes like `sm:`, `md:`, `lg:`, `xl:` to apply styles at different breakpoints.
<div className="w-full md:w-1/2 lg:w-1/3 p-4">Responsive box</div>

Customization

You can customize Tailwind by editing `tailwind.config.js` to add your own colors, fonts, breakpoints, etc.
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {
      colors: {
        primary: '#ff6b6b',
      },
    },
  },
  plugins: [],
};

Two Minute Drill

  • Tailwind is a utility-first CSS framework that provides pre-built classes for rapid UI development.
  • You style elements by combining utility classes directly in JSX.
  • Responsive design is easy with breakpoint prefixes.
  • Tailwind is highly customizable via config file.
  • Works seamlessly with React just add classes to `className`.
Practice ExercisesInterview QuestionsTake Quiz

Need more clarification?

Drop us an email at career@quipoinfotech.com