Author: M Abo Bakar Aslam

Examples for Tailwind CSS with Simple HTML Pages

This section demonstrates how to style web components like headings, paragraphs, and navigation bars using Tailwind CSS in a React environment. You will learn how to apply utility classes, create responsive designs with breakpoints, use hover effects, and define custom styles and components. These techniques help build modern, responsive, and maintainable user interfaces efficiently.

1. Heading and Paragraph

Example Code 1: Displaying a heading <h1> having text of red color.

<!--File: myHTMLFile.html-->
<html>
    <head>
        <title>My Web Page using Tailwind CSS</title>
    </head>
    <body>
        <h1 className="text-red-700">Author Name</h1>
    </body>
 
</html>

Example Code 2: Creating a webpage having following characteristics.

A heading having following properties
- The tag as <h1>
- Center Aligned
- Margin from both top and button as of 12px
- Font size as of 24px
- Some text color
A paragraph having following properties
- It will be displayed below above heading.
- Center Align
- Default text color
- Contain at least 20 words.
Comments in both JavaScript and HTML code-sections.

<!--File: myHTMLFile.html-->
<html>
    <head>
        <title>My Web Page using Tailwind CSS</title>
    </head>
    <body>
        <div className="text-center my-3"> <!--center align text in a container and margin along y-axis-->
            <h1 className="text-red-950 text-2xl">Author Name</h1> <!--text color and font-size-->
            <p>This is introduction about the author. This introduction is written in paragraph element. The author is interested in programming languages related to web, mobile application. The author has expertise in JavaScript and Python language.</p>
        </div>
    </body>
</html>

Note 1: If your HTML content is already displayed at center of the website vertically/horizontally, then it means that some CSS properties (like flex) are already set when you created your application. You can see these CSS properties in index.css file located in src folder.

Example Code 3: In above example, width of paragraph-text is high than heading. Set width of the paragraph such that both heading and paragraph are center-aligned, and width of paragraph may slightly higher than heading's width.

<!--File: myHTMLFile.html-->
<html>
    <head>
        <title>My Web Page using Tailwind CSS</title>
    </head>
    <body>
        <div>
            <div className="flex flex-col items-center my-3"> <!--center align text in a container-->
                <div>
                    <h1 className="text-red-950 text-2xl">Author Name</h1> <!--text color-->
                </div>
                <div className="text-center w-[400px]">
                    <p>This is introduction about the author. This introduction is written in paragraph element. The author is interested in programming languages related to web, mobile application. The author has expertise in JavaScript and Python language.</p>
                </div>
            </div>
        </div>
    </body>
</html>

Note followings in above code.

Custom CSS value is used for width of paragraph as 400px, but this width was not available as class in Tailwind CSS. Therefore, we used square bracket notation to specify custom value.
Vertically center alignment is required in this example. Therefore, we used <div> for all elements and flex for outer <div>

2. Navigation Bar

Example Code 4: Creating a navigation bar having following characteristics.

Three list items Home, About and Contact Us.
Some background color
Some padding and margin between border and items of navigation bar
All items should be horizontally arranged with some space-between.

<!--File: myHTMLFile.html-->
<html>
    <head>
        <title>My Web Page using Tailwind CSS</title>
    </head>
    <body>
        <nav className="bg-red-950 text-white py-5 px-2 my-3">
            <ul className="flex space-x-3">
                <li className="cursor-pointer">Home</li>
                <li className="cursor-pointer">About</li>
                <li className="cursor-pointer">Contact Us</li>
            </ul>
        </nav>
    </body>
</html>

Here we used <nav> tag. You can use simple <div> instead for simplicity.

3. Responsive Design

Example Code 5: It is related to responsive designing. In this example, we displayed a heading text with following characteristics.

Text color is white.
Background color is slate-950, if screen size is less than 640px (less than small screen size).
Background color is yellow-800, if screen size is in range of 640px to 767px (small screen device).
Background color is red-900, if screen size is in range of 768px to 1023px (medium screen device).
Background color is lime-800, if screen size is in range of 1024px to 1279px (large screen device).
Background color is purple-900, if screen size is in range of 1280px to 1535px (xl screen device).
Background color is cyan-700, if screen size is higher than 1535px (2xl screen device).

<!--File: myHTMLFile.html-->
<html>
    <head>
        <title>My Web Page using Tailwind CSS</title>
    </head>
    <body>
        <h1 className="bg-slate-950 text-white sm:bg-yellow-800 md:bg-red-900 lg:bg-lime-800 xl:bg-purple-900 2xl:bg-cyan-700">
            Different colors for different devices
        </h1>
    </body>
</html>

Note followings related to solution of this example.

We used default media queries on Tailwind CSS. There are five default classes (breakpoints) for media queries, that are also mentioned below.
- For small devices, the “sm” is used. Its range is from 640px to 767px.
- For medium devices, the “md” is used. Its range is from 768px to 1023px.
- For large devices, the “lg” is used. Its range is from 1024px to 1279px.
- For extra large devices, the “xl” is used. Its range is from 1280px to 1535px.
- For double extra large devices, the “2xl” is used. Its range is higher than 1535px.
These properties can be applied to any element like <p>, <div> etc.

Note These are just default media queries. You can change/update them according to your requirements.

4. Hover Breakpoints

Example Code 6: When hover over headings and button, then background color of the text is changed.

<!--File: myHTMLFile.html-->
<html>
    <head>
        <title>My Web Page using Tailwind CSS</title>
    </head>
    <body>
        <div>
            <h1 className="bg-black text-white hover:bg-slate-500 hover:text-black">
                Some text
            </h1>
            <h1 className="bg-black text-white sm:hover:bg-red-700 lg:hover:bg-green-700">
                Heading with sm:hover:
            </h1>
            <h1 className="bg-black text-white hover:sm:bg-yellow-800 hover:lg:bg-cyan-700">
                hover:sm:
            </h1>
            <button className="bg-blue-700 text-white hover:bg-green-700">
                My Button
            </button>
        </div>
    </body>
</html>

Note followings in this example solution.

Initial color of text is white
Initial background color of the text is black
Multiple classes can be applied with hover. In this example, we changed both background and text colors with hover.
Multiple properties are used with hover.
You can also used multiple properties with a single screen-breakpoint (previous example).

5. Custom Properties with @layer and @apply Directives

Example Code 7: In this example, we changed built-in features of <h1> according to our own requirements (just change text-color). We used @layer and @apply directives.

<!--File: myHTMLFile.html-->
<html>
    <head>
        <title>My Web Page using Tailwind CSS</title>
    </head>
    <body>
        <div>
            <h1>Effected heading</h1>
            <h1 className="text-cyan-700">Not Effected heading</h1>
        </div>
    </body>
 
</html>

/* File: index.css*/
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
  
@layer base {
  h1 {
    @apply text-red-600
  }
}

Note followings in this example.

The HTML tags are written in App.jsx and @layer/apply directives are written in index.css file.
There are two <h1> tags. One is effected (not using inline class) but other is not (using inline class).
In index.css file, lines 2 to 4 would be written when we install Tailwind CSS with react. In this code, we just wrote lines from 6 to 10.
We added our customize properties in base layer using @layer directive. Inside tag/class name, we used @apply directive to specify different properties.

Example Code 8: This example is similar to previous example but here we used multiple custom classes and multiple properties in each class.

Here, we just show updated version of index.css file as used in previous example.

/* File: index.css*/
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
  
@layer base {
  h1 {
    @apply text-red-600
  }
}

6. Custom Classes

Example Code 9: Here, we defined custom class myTextClass in which I used custom properties instead of using default classes.

It is also noted that we added our custom class into utilities layer.

<!--File: myHTMLFile.html-->
<html>
    <head>
        <title>My Web Page using Tailwind CSS</title>
    </head>
    <body>
        <div>
            <p className="myTextClass">My Text</p>
        </div>
    </body>
 
</html>

/* File: index.css*/
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
  
@layer utilities{
  .myTextClass{
    @apply text-xs text-black font-mono font-bold hover:underline hover:underline-offset-2 hover:text-red-600
  }

7. Custom Components in Component Layer

Example Code 10: If you know about Bootstrap, then well know components. In Tailwind CSS, there is no built-in components but you can define your own components easily. It is suggested that define you components in component layer.

In this example, we defined properties related to a button. After defining these properties into a class, then you can reuse it again and again easily.

<!--File: myHTMLFile.html-->
<html>
    <head>
        <title>My Web Page using Tailwind CSS</title>
    </head>
    <body>
        <div>
            <button class="btn">Click Me</button>
            <button class="btn bg-red-900 hover:bg-red-700">Click Me</button>
        </div>
    </body>
 
</html>

/* File: index.css*/
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
  
@layer components{
  .btn{
    @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full
}

Note: In above examples, we define our custom classes/components in related layer. It was according to given suggestion. But, if you define your classes/components at last of index.css file (after all imports), then output will be same as you saw in previous examples.

Here is only index.css file that includes all above classes but without any layer.

/* File: index.css*/
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
  
  
.btn{
    @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full
}
.myTextClass{
    @apply text-xs text-black font-mono font-bold hover:underline hover:underline-offset-2 hover:text-red-600
}
h1{
    @apply text-red-600
}
p{
    @apply text-red-300 font-extrabold hover:text-white
}