Frontend Unlocked: Styling and UI Frameworks!

Styling plays a crucial role in web development. A well-designed UI enhances the user experience and sets your application apart. This post explores popular CSS-in-JS solutions, frameworks, and strategies to style your Next.js applications efficiently.

CSS-in-JS Solutions

CSS-in-JS enables writing styles directly within your JavaScript code, scoped to components for better maintainability.

Styled-components

Styled components allow you to define component-level styles using template literals.

Example:

import styled from 'styled-components';

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

  &:hover {
    background: #005bb5;
  }
`;

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

Emotion

Emotion offers flexibility and performance with both styled and css utilities.

Example:

/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';

const buttonStyle = css`
  background: #0070f3;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;

  &:hover {
    background: #005bb5;
  }
`;

export default function App() {
  return <button css={buttonStyle}>Click Me</button>;
}

---

CSS Frameworks

Frameworks simplify styling by providing pre-designed components and utility classes.

Tailwind CSS

Tailwind CSS is a utility-first CSS framework that enables rapid UI development.

Installing Tailwind CSS in Next.js:

1. Install dependencies:

    npm install -D tailwindcss postcss autoprefixer
    npx tailwindcss init
   

2. Configure tailwind.config.js:

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

3. Add Tailwind to your CSS:

    /* styles/globals.css */
    @tailwind base;
    @tailwind components;
    @tailwind utilities;
   

Example:

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

---

Global Styles

Next.js supports global styles using CSS files or CSS modules.

Global CSS

Import global styles in _app.js.

// pages/_app.js
import '../styles/globals.css';

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

CSS Modules

CSS modules allow scoping styles to specific components.

Example:

// styles/Button.module.css
.button {
  background-color: #0070f3;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  transition: background-color 0.3s;
}

.button:hover {
  background-color: #005bb5;
}

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

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

---

Styled-JSX

Next.js includes support for styled-jsx for component-scoped styles.

Example:

export default function App() {
  return (
    <div>
      <button>Click Me</button>
      <style jsx>{`
        button {
          background: #0070f3;
          color: white;
          padding: 10px 20px;
          border-radius: 5px;
          transition: background-color 0.3s;
        }

        button:hover {
          background: #005bb5;
        }
      `}</style>
    </div>
  );
}

---

Conclusion

Choosing the right styling solution depends on your project requirements. CSS-in-JS solutions like Styled-components and Emotion are great for component-scoped styles, while Tailwind CSS accelerates development with utility-first classes. Global styles and CSS modules are essential for maintaining consistency across the application.

Stay tuned for more insights in the Frontend Unlocked series as we explore advanced styling strategies and best practices!