You can use /app/ui folder/global.css to add CSS rules to all the routes in your application - such as CSS reset rules, site-wide styles for HTML elements like links, and more.
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. In Next.js, this is the root layout.
Add global styles to your application by navigating to /app/layout.tsx and importing the global.css file:
import '@/app/ui/global.css';
Tailwind CSS
Tailwind is a CSS framework that speeds up the development process by allowing you to quickly write utility classes directly in your TSX markup.
Inside global.css, you'll notice some @tailwind directives:
@tailwind base;
@tailwind components;
@tailwind utilities;
When you use create-next-app to start a new project, Next.js will ask if you want to use Tailwind. If you select yes, Next.js will automatically install the necessary packages and configure Tailwind in your application.
If you prefer writing traditional CSS rules or keeping your styles separate from your JSX - CSS Modules are a great 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.
Top comments (0)