Obafemi Emmanuel

CSS is a crucial part of web development, and with modern JavaScript frameworks like React and Next.js, various approaches to styling have emerged. This article explores three popular methods: Styled Components, CSS Modules, and Tailwind CSS with Next.js.

1. Styled Components in React

Styled Components is a library for styling React components using a CSS-in-JS approach. It allows developers to write CSS directly within JavaScript, making styles more dynamic and scoped to components.

Installation

To use Styled Components, install it via npm or yarn:

npm install styled-components
# or
yarn add styled-components

Usage

With Styled Components, you can create styled elements using template literals:

import styled from 'styled-components';

const Button = styled.button`
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;

  &:hover {
    background-color: darkblue;
  }
`;

function App() {
  return <Button>Click Me</Button>;
}

export default App;

Benefits of Styled Components

• Scoped styles (no class name conflicts)
• Dynamic styling with props
• CSS-in-JS keeps styles close to components

2. CSS Modules

CSS Modules provide a way to write modular and scoped CSS in React applications. Instead of global styles, each component can have its own styles without affecting others.

Setup in React

By default, React supports CSS Modules. Create a .module.css file:

/* Button.module.css */
.button {
  background-color: green;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.button:hover {
  background-color: darkgreen;
}

Usage in React

import styles from './Button.module.css';

function Button() {
  return <button className={styles.button}>Click Me</button>;
}

export default Button;

Benefits of CSS Modules

• No global scope issues (styles are scoped to the component)
• Works well with existing CSS frameworks
• Supports dynamic class names with JavaScript

3. Tailwind CSS with Next.js

Tailwind CSS is a utility-first CSS framework that provides pre-defined classes to style components efficiently.

Installation in Next.js

To install Tailwind in a Next.js project, run:

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

Configure Tailwind

Modify the tailwind.config.js file:

module.exports = {
  content: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

Using Tailwind in Components

function Button() {
  return (
    <button className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-700">
      Click Me
    </button>
  );
}

export default Button;

Benefits of Tailwind CSS

• Utility-first approach speeds up development
• Consistent design system
• Responsive design made easy with predefined classes

Conclusion

Each of these CSS techniques has its advantages:

• Styled Components: Best for dynamic and component-scoped styling.
• CSS Modules: Ideal for modular, maintainable CSS with traditional stylesheets.
• Tailwind CSS: Great for rapid development with utility-first styling.

Depending on your project needs, you can choose the best approach or even combine them for maximum flexibility!