In a Next.js or React project, you can apply styles in three main ways: using an external stylesheet, the <style> tag (often referred to as embedded styles), or the JSX style attribute (inline styles). Let's explore these approaches. To this three main ways, we could add a fourth one that is easy to use and very efficient: TailwindCSS.

Embedded Styles (Internal CSS)

Within a React component, you can use the <style> tag directly:

<style>{``}</style>

The CSS inside the template literal (` `) is scoped to the component in which the <style> tag is declared. You can also embed JavaScript expressions (like variables or state values) to make the styling dynamic.

Example

import './App.css';
import { useState } from 'react';

function getRandomValue(arr) {
const randomIndex = Math.floor(Math.random() * arr.length);
return arr[randomIndex];
}

function App() {
const colors = ['red', 'green', 'blue', 'yellow', 'purple'];
const [colorValue, setColorValue] = useState(colors[0]);

return ( <div className="wrapper"> <div className="box"></div>
<button className="centered-button" onClick={()=> setColorValue(getRandomValue(colors))}>
Change color </button> <style>{`         .wrapper {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          position: relative; 
        }
        .box {
          width: 100px;
          height: 100px;
          margin-bottom: 20px;
          background-color: ${colorValue};
        }
        .centered-button {
          position: relative;
          left: -50%;
          transform: translateX(50%);
        }
      `}</style> </div>
);
}

export default App;

JSX Style Syntax (Inline Styles)

You can also style elements using the style attribute in JSX by passing a JavaScript object. Keep in mind the following:

• Use camelCase instead of kebab-case (backgroundColor instead of background-color).
• Unitless numbers are interpreted as pixels (e.g., width: 100 becomes 100px).
• You can compute styles dynamically with JavaScript.
• The style attribute must be an object, not a string.

Example

const style = {
color: 'red',
fontSize: '16px'
};

return <div style={style}>Hello</div>;

Limitations

Inline styles have some important limitations:

• No support for pseudo-classes like :hover, :focus
• No media queries
• No keyframe animations

For complex or scalable styling, consider using CSS stylesheet.

External Stylesheet

Using an external CSS file is the most traditional and widely-used method. You create a .css file and import it into your component.

Example

import './App.css';

function App() {
return ( <div> <h1 className="title">Hello with Stylesheet</h1> </div>
);
}

export default App;

This approach keeps your styles separate from your component logic and scales well for larger applications.

TailwindCSS

TailwindCSS is a utility-first CSS framework that allows you to style your components by applying pre-defined classes directly to the className attribute. Once installed and configured, you can use its extensive set of utility classes to control layout, spacing, colors, typography, and more—without writing custom CSS.

Instead of creating separate stylesheets or style objects, Tailwind lets you style components inline with meaningful class names.

Example

function App() {
  return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
      <h1 className="text-3xl font-bold text-blue-600 mb-4">Hello, Tailwind!</h1>
      <button className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition">
        Click Me
      </button>
    </div>
  );
}

export default App;

How to Set Up

1. Install TailwindCSS in your project:

   npm install -D tailwindcss postcss autoprefixer
   npx tailwindcss init -p

2. Configure your tailwind.config.js to enable purge (for production builds) and include paths to your components:

   content: ["./src/**/*.{js,jsx,ts,tsx}"]

3. Add the Tailwind directives to your CSS (usually src/index.css or globals.css):

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

Now you're ready to use Tailwind utility classes directly in your JSX components.