Basic-Example-Codes-for-Tailwind-CSS-in-React

In this lesson, you will learn different codes related to tailwind CSS in react application. Codes are related to following categories.

View All Codes on GitHub

1. Heading and Paragraph

Example Code 1: Displaying a heading (h1) having text of red color.

/* File: App.jsx */
function App() {
  return (
    <h1 className="text-red-700">Author Name</h1>
  );
}
export default App;

Download Code

Note 1: Install VS code extension for react that is “ES7 React/Redux/GraphQL/React-Native snippets”. Above example-code can easily be written by just typing “rfce” and hit enter after showing code by the extension.

Note 2: Set language in Emmet section in VS code. Go to File->Preferences->Settings. Type “emmet” in search bar. Now, in “Include Language” section, click on “Add Item”. And then set “Item” as “javascript” and “Value” as “javascriptreact”. Now hit “Ok”. In this way, you can easily write HTML contents in your javascript file (.jsx).

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: App.jsx */
function App() {
  return (
    <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>
  );
}
export default App;

Download Code

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.

Note 2: You must use fragmentation to use multiple elements in return section.

Note 3: Common properties are applied on outside container.

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: App.css */
function App() {
  return (
    <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>
  );
}
export default App;

Download Code

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.
If code has multiple elements, then you should proper format the code. A VS code extension is very helpful in this case that is “Prettier – Code formatter“. To use this extension, right click on the code and select “Format Document“.
Vertically center alignment is required in this example. Therefore, we used <div> for all elements and “flex” for outer <div>.

Note: You should know more about “flex” by clicking on below button for flex.

View “Flex” Lesson

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: App.jsx */
function App() {
  return (
    <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>
  );
}
export default App;

Download Code

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: App.jsx */
function App() {
  return (
    <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>
  );
}
export default App;

Download Code

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 Breakpoint

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

/* File: App.jsx */
function App() {
  return (
    <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>
  );
}
export default App;

Download Code

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: App.jsx */
function App() {
  return (
    <div>
      <h1>Effected heading</h1>
      <h1 className="text-cyan-700">Not Effected heading</h1>
    </div>
  );
}
export default App;

/* 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.js 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
  }
  p{
    @apply text-red-300 font-extrabold hover:text-white
    
  }
}

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: App.jsx */
function App() {
  return (
    <div>
      <p className="myTextClass">My Text</p>
    </div>
  );
}
export default App;

/* 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: App.jsx */
function App() {
  return (
    <div>
      <button class="btn">Click Me</button>
      <button class="btn bg-red-900 hover:bg-red-700">Click Me</button>
    </div>
  );
}
export default App;

/* 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
}

1. Heading and Paragraph

2. Navigation Bar

3. Responsive Design

4. Hover Breakpoint

5. Custom Properties with @layer and @apply Directives

6. Custom Classes

7. Custom Components in Component Layer

Share this: