Responsive Web Designing using Tailwind CSS

In this lesson, we converted all examples of simple external-CSS (discussed in CSS lessons) using Tailwind CSS.

Example Code 1: Note following in this example.

Color is applied on only sm but it will also be applied on lg and xl.
TailwindCSS used its own format for colors.

<!--File: myFile.html-->
<html>
    <body>
        <div className="text-black p-[5px] sm:bg-yellow-300 bg-green-300">
           <p>Responsive Design Example</p>
           <p>Change the background color based on screen width</p>
        </div>
    </body>
</html>

Output

Output for Screen Less Than 600px

Responsive Design Example

Change the background color based on screen width

Output for Screen Greater Than or equal to 601px

Responsive Design Example

Change the background color based on screen width

2. Possible Screen Sizzes

The CSS media queries translate directly into Tailwind CSS breakpoint prefixes, although Tailwind's default breakpoints have slightly different values. Here's how you'd represent them using Tailwind's system and how they compare:

TailwindCSS Default Breakpoints:

xl: (1280px and up)
lg: (1024px to 1279px)
md: (768px to 1023px)
sm: (640px to 767px)

(No direct equivalent for XS; you'd use base utility classes for mobile-first styles)

Example Code 2:

Here, hash code for different color which are not available in Tailwind CSS by name.

Color Code for rebeccapurple: #663399
Tailwind CSS class for red: bg-red-300
Color Code for lightcoral: #f08080
Tailwind CSS class for green: bg-green-300
Tailwind CSS class for blue: bg-blue-300

<html>
    <body>
        <div className="text-black p-[5px] bg-[#663399] sm:bg-red-600 md:bg-[#f08080] lg:bg-green-300 xl:bg-blue-300">
            <p>Responsive Design Example</p>
            <p>Change the background color based on screen width</p>
        </div>
    </body>
</html>

Output

Output for Screen less than 575px

Responsive Design Example

Change the background color based on screen width

Output for Screen from 576px to 767px

Responsive Design Example

Change the background color based on screen width

Output for Screen from 768px to 991px

Responsive Design Example

Change the background color based on screen width

Output for Screen from 992px to 1199px

Responsive Design Example

Change the background color based on screen width

Output for Screen more than 1200px

Responsive Design Example

Change the background color based on screen width

Example Code 3: Here, we displayed three block elements (having skills, projects and hobbies) within a main container

Below sm, width will be full, w-full
For both skills and projects containers, width will be 25%, w-1/4
For Hobbies, width will be 50%, w-1/2

<html>
    <body>
        <div>
            <div class="p-5 text-center border border-black bg-[#f08080] text-white w-full sm:w-1/4">Skills</div>
            <div class="p-5 text-center border border-black bg-green-500 text-white w-full sm:w-1/4">Projects</div>
            <div class="p-5 text-center border border-black bg-blue-300 text-white w-full sm:w-1/2">Hobbies</div>
        </div>
    </body>
</html>

Output

Output for Screen less than 600px

Skills

Projects

Hobbies

Output for Screen greater than or equal to 601px

Skills

Projects

Hobbies

Example Code 4: This example is same as above, but all containers would be displayed in one line.

We just used flex for main container
For xl screen: Size for lg will be applied
For screen less than sm (640px): 100% or w-full will be applied
For both sm and md: 20% or w-1/5 will be applied. Notice that there is not class for md

<html>
    <body>
        <div class="flex justify-between text-center border border-black">
            <div class="p-5 text-center border border-black bg-[#f08080] text-white w-full sm:w-1/5 lg:w-1/4">Skills</div>
            <div class="p-5 text-center border border-black bg-green-500 text-white w-full sm:w-1/5 lg:w-1/4">Projects</div>
            <div class="p-5 text-center border border-black bg-blue-300 text-white w-full sm:w-1/5 lg:w-1/4">Hobbies</div>
        </div>
    </body>
</html>

Output

Output for Screen less than 600px

Skills

Projects

Hobbies

Output for Screen from 601px to 800px

Skills

Projects

Hobbies

Output for Screen more than 801px

Skills

Projects

Hobbies

Example Code 5: The flex container will always display its items in a row, until you use flex-direction with column as value. In previous example, when screen's size will lie in category of max-width: 640px, then each item would not displayed vertically (as you notices in example code 3).

All lines are same as example code 4. But we add followings
- flex-col is used for base(less than 640px) class/style
- flex-row will be applied on sm screen. It will also apply on remaing screens like md, lg and xl.

<html>
    <body>
        <div class="flex justify-between text-center border border-black flex-col sm:flex-row">
            <div class="p-5 text-center border border-black bg-[#f08080] text-white w-full sm:w-1/5 lg:w-1/4">Skills</div>
            <div class="p-5 text-center border border-black bg-green-500 text-white w-full sm:w-1/5 lg:w-1/4">Projects</div>
            <div class="p-5 text-center border border-black bg-blue-300 text-white w-full sm:w-1/5 lg:w-1/4">Hobbies</div>
        </div>
    </body>
</html>

Output

Output for Screen less than 600px

Skills

Projects

Hobbies

Output for Screen from 601px to 800px

Skills

Projects

Hobbies

Output for Screen more than 801px

Skills

Projects

Hobbies

Example Code 6: In case of large devices, if you want to display all container's items as they defined in HTML file, but change the sequence of container's items for different sizes of devices, then you will be needed of “order” property of flex.

If you don't use flex, then order property wouldn't work because order is property of flex.
If you don't specify order's value for any item, then it would be displayed first. Notice media query for screen's ranges as base class/style and sm.
feature of sm will also be applied on both lg and xl.

<html>
    <body>
        <div class="flex justify-between text-center border border-black flex-col sm:flex-row">
            <div class="p-5 text-center border border-black bg-[#f08080] text-white w-full sm:w-1/5 lg:w-1/4 order-1 sm:order-3">Skills</div>
            <div class="p-5 text-center border border-black bg-green-500 text-white w-full sm:w-1/5 lg:w-1/4 order-2 sm:order-1">Projects</div>
            <div class="p-5 text-center border border-black bg-blue-300 text-white w-full sm:w-1/5 lg:w-1/4 order-3 sm:order-2">Hobbies</div>
        </div>
    </body>
</html>

Output

Output for Screen less than 600px

Hobbies

Projects

Skills

Output for Screen from 601px to 800px

Projects

Hobbies

Skills

Output for Screen more than 801px

Skills

Projects

Hobbies