In React, you have multiple options for how to style your components using CSS:

1. CSS Classes and CSS files
2. Inline Styles
3. CSS Modules
4. CSS in JS

In this section, we explore the first three as the latter depends on your selection of the CSS library you want to use, such as Emotion or Styled Components.

CSS Classes

Similar to vanilla javascript, you first need to define and include your CSS file in the project. Consider the following CSS file:

.header {
    font-weight: bold;
    color: salmon;
} 

.header:hover {
    color: blue;
}

.code {
    font-family: monospace;
    color: #333;
}

Consider the file name to be styles.css, you can include this file in the main index.html file:

<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>

But, more often with web frameworks such as Next.js you would import this file in your entry level file such as app.tsx:

// file: app.tsx
import "./styles.css"

Using CSS files in your application creates global classes shared in your application. But how do we use this? In html we specify CSS classes using class such as <h1 class="header">. Would you know what the problem is with that in JSX?

Well, class is a reserved word in javascript, so we cannot use it. Therefore, we use className instead. For example:

function Greeting() {
    return <h1 className="header">Hello</h1>
}

The issue with global class names is that it can create conflicts. Particularly if you use 3rd party libraries that introcuce their own classes and class names.

Inline Styles

Alternatively, you can use inline styles to specify the look of your elements. In HTML, you specify styles in the following way:

<h1 style="font-weight: bold;font-size: 1em">Hello</h1>

In React, for increased type safety and control, we use object notation of CSS classes specified inside the styles prop. The example above would look in React as following:

<h1 style={{ fontWeight: 'bold', fontSize: "1em" }}>Hello</h1>

So, style prop expects an object with values of CSS styles as react does not know how to parse style strings. You can easily create reusable inline styles similar to this:

const header = { fontWeight: 'bold', fontSize: "1em" }

<h1 style={header}>Header 1</h1>
<h1 style={header}>Header 2</h1>

The issue with inline styles is that they are limited in their use, as they cannot specify advanced behaviours such as mouse over events, or media queries for responsive styling.

CSS Modules

CSS Modules combine the convenience and expressivity of CSS classes with creation of isolated class names. To enable CSS modules, you have to use compaible bundler or framework, such as Next.js. 

To create a CSS module you rename the styles.css to styles.module.css and import it in your component. You can then access individual class names using the .dot notation such as the following:

import styles from "./styles.module.css"

function Greeting() {
    return <h1 className={styles.header}>Hello<h1>
}

Under the hood, the framework creates unique class names per each css module. For example, in browser, you would see something similar to this (note the name of the class):

<h1 className="App_header_JQ3e45">Hello</h1>

Consequently, you can use the same name of the CSS class across multiple CSS modules, without worry to create conflicts. In Skillpies editor we do not support CSS modules, only global CSS files and inline styles. But, some of our external exercises will use CSS modules, so be on the lookout! 

Tailwind.JS

Imagine you're building a React app and need to style components. You could write CSS files, use CSS-in-JS, or rely on frameworks like Bootstrap. But what if you had a way to style components quickly, consistently, and without writing custom CSS?

This is where Tailwind CSS shines!

Tailwind CSS is a utility-first CSS framework that provides predefined classes to style elements directly in JSX. It’s fast, scalable, and helps maintain consistent UI designs in React apps.

Real-World Problem

You’re developing a dashboard with buttons, cards, and forms. Instead of writing CSS rules for every element, Tailwind lets you apply predefined styles directly in JSX:

<button className="bg-blue-500 text-white px-4 py-2 rounded">Click Me</button>

This makes styling easier and keeps everything in one place—no separate CSS files needed!

Lecture: Using Tailwind CSS in React

1. Installing Tailwind in a React Project

To use Tailwind CSS in a React project, install it via pnpm or npm (🔗 official instructions):

pnpx create-next-app@latest tailwind --typescript --eslint --app 
pnpm install tailwindcss @tailwindcss/postcss postcss  

Then, configure postcss.config.mjs:

const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};
export default config;

Finally, import Tailwind into globals.css:

@import "tailwindcss";

When to Use?

• When you want rapid styling without writing custom CSS.
• For building scalable, responsive UIs efficiently.

When Not to Use?

• If you prefer traditional CSS files or styled-components.
• When working on projects requiring highly unique or artistic designs.

2. Tailwind Utility Classes: The Basics

Tailwind uses utility classes to apply styles inline. Let’s break them down:

Text and Background Colors

<p className="text-red-500 bg-gray-200 p-4">Hello Tailwind!</p>

✔️ text-red-500 → Sets text color
✔️ bg-gray-200 → Sets background color
✔️ p-4 → Adds padding

Typography and Font Styling

<h1 className="text-3xl font-bold underline">Welcome</h1>

✔️ text-3xl → Large font size
✔️ font-bold → Bold text
✔️ underline → Underlined text

Flexbox & Layout

<div className="flex justify-center items-center h-screen">
  <p className="text-lg">Centered Content</p>
</div>

✔️ flex → Enables Flexbox
✔️ justify-center → Centers horizontally
✔️ items-center → Centers vertically
✔️ h-screen → Full height of screen

3. Tailwind and React Components

Tailwind works seamlessly with React components.

Reusable Button Component

const Button = ({ text }) => {
  return (
    <button className="bg-blue-600 hover:bg-blue-800 text-white py-2 px-4 rounded">
      {text}
    </button>
  );
};
export default Button;

✔️ hover:bg-blue-800 → Darkens button on hover
✔️ rounded → Rounded corners

4. Responsive Design with Tailwind

Tailwind makes responsive design easy with breakpoints:

<div className="w-full md:w-1/2 lg:w-1/3 bg-green-300 p-4">
  Responsive Box
</div>

✔️ w-full → Full width by default
✔️ md:w-1/2 → 50% width on medium screens
✔️ lg:w-1/3 → 33% width on large screens

Conclusion: Key Takeaways

✅ Tailwind CSS is a utility-first framework for rapid styling in React.
✅ You can apply styles directly in JSX using predefined classes.
✅ Tailwind makes responsive design simple with breakpoints.
✅ It’s fast, scalable, and great for modern React apps.