Adding CSS in React JS with Tailwind

In React, you can style components in various ways, and one of the most popular ways is using Tailwind CSS. Tailwind is a utility-first CSS framework that allows you to apply styles directly within your JSX elements using utility classes. Here's how you can use Tailwind CSS in React:

1. Using Tailwind CSS in React

In this method, you use Tailwind's utility classes directly in your React JSX elements.

        // App.js
        import React from 'react';

        const App = () => {
            return (
                

                    
Hello, React with Tailwind!
                    
                        Click Me
                    
                
            );
        };

        export default App;
    

2. Tailwind with React and Conditional Styling

You can also use conditional classes in React based on component state or props. This allows dynamic styling with Tailwind.

        // App.js
        import React, { useState } from 'react';

        const App = () => {
            const [isClicked, setIsClicked] = useState(false);

            const toggleClick = () => setIsClicked(!isClicked);

            return (
                

                    
Hello, React with Conditional Tailwind CSS!
                    
                        {isClicked ? 'Clicked!' : 'Click Me'}
                    
                
            );
        };

        export default App;
    

3. Using Tailwind CSS with CSS Modules

You can also use Tailwind CSS in combination with CSS Modules for scoped styles. This prevents conflicts between global and component-specific styles.

        // App.js
        import React from 'react';
        import styles from './App.module.css'; // Importing CSS Module
        import 'tailwindcss/tailwind.css';

        const App = () => {
            return (
                

                    
Hello, React with Tailwind and CSS Modules!
                    
                        Click Me
                    
                
            );
        };

        export default App;

        /* App.module.css */
        .container {
            background-color: #f9fafb;
            border-radius: 8px;
        }