Tailwind Css Using Tailwinds Color Palette Complete Guide

Complete Examples, Step by Step for Beginners: Tailwind CSS Using Tailwind's Color Palette

Step 1: Set Up Your Project

First, you need to set up a new project or add Tailwind CSS to an existing project. Below are the steps to create a new project using create-react-app with Tailwind CSS integrated.

1. Create a New React Project Open your terminal and run the following command to create a new React project:

   npx create-react-app tailwind-color-palette-example
   cd tailwind-color-palette-example
   

2. Install Tailwind CSS Install Tailwind CSS along with its peer dependencies:

   npm install -D tailwindcss postcss autoprefixer
   

3. Initialize Tailwind CSS Create the Tailwind configuration files by running:

   npx tailwindcss init -p
   

   This command creates two files: tailwind.config.js and postcss.config.js.

4. Update tailwind.config.js Modify the tailwind.config.js file to include the paths to all of your template files:

   /** @type {import('tailwindcss').Config} */
   module.exports = {
     content: [
       "./src/**/*.{js,jsx,ts,tsx}",
     ],
     theme: {
       extend: {},
     },
     plugins: [],
   }
   

5. Import Tailwind CSS into Your CSS Open src/index.css and import Tailwind's base, components, and utilities styles:

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

You've now successfully set up Tailwind CSS in your project. Let's proceed to the examples.

Step 2: Using Tailwind's Color Palette in an Example

Let's create a simple card component using Tailwind's color palette. We'll use various shades of blue from Tailwind's default color palette.

1. Create the Card Component Open src/App.js and modify it to include the following code:

   import React from 'react';
   
   const App = () => {
     return (
       <div className="flex items-center justify-center bg-gray-100 min-h-screen">
         <div className="max-w-sm bg-white rounded-lg shadow-md overflow-hidden">
           <img
             className="w-full h-48 object-cover"
             src="https://via.placeholder.com/640x480"
             alt="Card Image"
           />
           <div className="px-6 py-4">
             <div className="font-bold text-xl mb-2 text-blue-600">Card Title</div>
             <p className="text-gray-700 text-base">
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
               lacinia bibendum nulla sed consectetur.
             </p>
           </div>
           <div className="px-6 pt-4 pb-2">
             <span className="inline-block bg-blue-200 rounded-full px-3 py-1 text-sm font-semibold text-blue-700 mr-2 mb-2">
               #tailwindcss
             </span>
             <span className="inline-block bg-blue-200 rounded-full px-3 py-1 text-sm font-semibold text-blue-700 mr-2 mb-2">
               #responsive
             </span>
             <span className="inline-block bg-blue-200 rounded-full px-3 py-1 text-sm font-semibold text-blue-700 mr-2 mb-2">
               #frontend
             </span>
           </div>
         </div>
       </div>
     );
   };
   
   export default App;
   

2. Explanation of the Example

   • Container: The outermost div is styled with flex, items-center, justify-center, and bg-gray-100 to center the content on the page with a light gray background.
   • Card: The card itself is wrapped in a div with max-w-sm, bg-white, rounded-lg, and shadow-md classes to give it a maximum width, white background, rounded corners, and a shadow.
   • Image: The img tag uses w-full, h-48, and object-cover to make the image full-width of its container, set a fixed height, and make sure the image covers the container while maintaining its aspect ratio.
   • Title and Description: The text inside the card uses various shades of gray and blue. The title is bold, large, and blue, while the description is gray and smaller.
   • Tags: The tags at the bottom use a light blue color (bg-blue-200), rounded corners, padding, and blue text.

3. Run Your Project Save your changes and start your development server:

   npm start
   

   Open your browser and navigate to http://localhost:3000 to see your styled card component.

Step 3: Customizing the Colors

Tailwind's color palette is highly customizable. If you want to customize or add new colors, you can modify the tailwind.config.js file.

1. Modify tailwind.config.js

   Open your tailwind.config.js file and add a custom color palette:

   /** @type {import('tailwindcss').Config} */
   module.exports = {
     content: [
       "./src/**/*.{js,jsx,ts,tsx}",
     ],
     theme: {
       extend: {
         colors: {
           'custom-blue': '#1e40af',
           'custom-blue-light': '#3b82f6',
           'custom-blue-dark': '#1d4ed8',
         },
       },
     },
     plugins: [],
   }
   

2. Using Custom Colors

   Update your App.js file to use these new custom colors:

   import React from 'react';
   
   const App = () => {
     return (
       <div className="flex items-center justify-center bg-gray-100 min-h-screen">
         <div className="max-w-sm bg-white rounded-lg shadow-md overflow-hidden">
           <img
             className="w-full h-48 object-cover"
             src="https://via.placeholder.com/640x480"
             alt="Card Image"
           />
           <div className="px-6 py-4">
             <div className="font-bold text-xl mb-2 text-custom-blue-dark">Card Title</div>
             <p className="text-gray-700 text-base">
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
               lacinia bibendum nulla sed consectetur.
             </p>
           </div>
           <div className="px-6 pt-4 pb-2">
             <span className="inline-block bg-custom-blue-light rounded-full px-3 py-1 text-sm font-semibold text-custom-blue-dark mr-2 mb-2">
               #tailwindcss
             </span>
             <span className="inline-block bg-custom-blue-light rounded-full px-3 py-1 text-sm font-semibold text-custom-blue-dark mr-2 mb-2">
               #responsive
             </span>
             <span className="inline-block bg-custom-blue-light rounded-full px-3 py-1 text-sm font-semibold text-custom-blue-dark mr-2 mb-2">
               #frontend
             </span>
           </div>
         </div>
       </div>
     );
   };
   
   export default App;
   

3. Run Your Project Again

   Save your changes and refresh your browser to see the updated card with your custom color palette.