css

10 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Tailwind CSS setup with @tailwindcss/postcss

To set up Tailwind CSS in Next.js, install tailwindcss and @tailwindcss/postcss packages. Add the PostCSS plugin to postcss.config.mjs with '@tailwindcss/postcss': {} in the plugins object. Import Tailwind in a global CSS file using @import 'tailwindcss'. For App Router, import the CSS file in app/layout.tsx. For Pages Router, import it in pages/_app.js.

CSS Modules file extension and usage

CSS Modules files use the .module.css extension. When imported into a component, they are available as a styles object where each class name becomes a property. For example, a class named 'blog' in app/blog/blog.module.css is accessed as styles.blog in the component.

Global CSS import in App Router

Create an app/global.css file and import it in the root layout (app/layout.tsx or app/layout.js) to apply styles to every route in the application. Global styles can be imported into any layout, page, or component inside the app directory.

Global CSS import in Pages Router

Import global stylesheets inside the pages/_app.js file to apply styles to every route in the application. This is the recommended location to avoid conflicts.

External stylesheet imports in App Router

Stylesheets published by external packages can be imported anywhere in the app directory, including colocated components. For example, 'bootstrap/dist/css/bootstrap.css' can be imported directly in a layout or component.

External stylesheet imports from node_modules in Pages Router

Since Next.js 9.5.4, CSS files from node_modules can be imported anywhere in the application. For global stylesheets like bootstrap or nprogress, import them in pages/_app.js. For CSS required by third-party components, import the stylesheet directly in the component file.

CSS ordering and merging in production

The order of CSS depends on the order you import styles in your code. Next.js optimizes CSS during production builds by automatically chunking and merging stylesheets. CSS imports are ordered based on when they are encountered in the import chain—if a component is imported before a styles module, that component's styles will be ordered first.

CSS import ordering recommendations

To keep CSS ordering predictable: try to contain CSS imports to a single JavaScript or TypeScript entry file; import global styles and Tailwind stylesheets in the root of your application; use Tailwind CSS for most styling needs; use CSS Modules for component-specific styles when Tailwind utilities are insufficient; use consistent naming convention like <name>.module.css; extract shared styles into shared components to avoid duplicate imports; turn off linters or formatters that auto-sort imports like ESLint's sort-imports; use the cssChunking option in next.config.js to control how CSS is chunked.

CSS development vs production behavior

In development (next dev), CSS updates apply instantly with Fast Refresh. In production (next build), all CSS files are automatically concatenated into many minified and code-split .css files, ensuring minimal CSS is loaded for a route. CSS loads with JavaScript disabled in production, but JavaScript is required in development for Fast Refresh. CSS ordering can behave differently in development, so always check the build (next build) to verify the final CSS order.

Global styles recommendation and best practices

Global styles should be reserved for truly global CSS like Tailwind's base styles. Use Tailwind CSS for component styling and CSS Modules for custom scoped CSS when needed. This recommendation applies because React's built-in support for stylesheets to integrate with Suspense currently does not remove stylesheets as you navigate between routes, which can lead to conflicts.

Give your agent this brain