DEV Community

Samuel Lubliner
Samuel Lubliner

Posted on ā€¢ Edited on

1

CSS Styling (Next.js)

You can visit my GitHub repo to follow along with me.

git commit -m "Add global styles"

You can use /app/ui folder/global.css to add CSS rules to all the routes in your application.

You can import global.css in any component in your application, but it's usually good practice to add it to your top-level component. This is the root layout.

Add global styles to your application by importing global.css in /app/layout.tsx:

import '@/app/ui/global.css';

Tailwind CSS

Tailwind is a CSS framework that helps you to quickly write utility classes directly in your TSX markup.

Inside global.css, there are some @tailwind directives:

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

When you use create-next-app, Next.js will ask if you want to use Tailwind and automatically install the necessary packages and configure Tailwind in your application.

For traditional CSS rules or keeping your styles separate from your JSX - CSS Modules are an alternative.

Using the clsx library to toggle class names

There may be cases where you may need to conditionally style an element based on state or some other condition. clsx is a library that lets you toggle class names easily.

Other style alternatives

  • Sass which allows you to import .css and .scss files.
  • CSS-in-JS libraries such as styled-jsx, styled-components, and emotion

CSS documentation

Image of Docusign

Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (0)

nextjs tutorial video

Youtube Tutorial Series šŸ“ŗ

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series šŸ‘€

Watch the Youtube series

šŸ‘‹ Kindness is contagious

Please leave a ā¤ļø or a friendly comment on this post if you found it helpful!

Okay