Are you an LLM? You can read better optimized documentation at /docs/guide/usage/linter/rules/nextjs/no-css-tags.md for this page in Markdown format
nextjs/no-css-tags Correctness
What it does
Prevents manual inclusion of stylesheets using <link> tags in Next.js applications. This rule checks for <link> tags with rel="stylesheet" that reference local CSS files.
Why is this bad?
Next.js handles CSS imports automatically through its built-in CSS support. Manual stylesheet inclusion bypasses Next.js's built-in CSS optimization, prevents proper code splitting and optimization of styles, and may cause Flash of Unstyled Content (FOUC). This also breaks automatic CSS hot reloading during development.
Examples
Examples of incorrect code for this rule:
jsx
// Manually including local CSS file
<link href="/_next/static/css/styles.css" rel="stylesheet" />
// In pages/_document.js
<Head>
<link href="css/my-styles.css" rel="stylesheet" />
</Head>Examples of correct code for this rule:
jsx
// Importing CSS file directly
import '../styles/global.css'
// Using CSS Modules
import styles from './Button.module.css'
// Using external stylesheets (allowed)
<link
href="https://fonts.googleapis.com/css?family=Open+Sans"
rel="stylesheet"
/>
// Using styled-jsx
<style jsx>{`
.button { color: blue; }
`}</style>How to use
To enable this rule using the config file or in the CLI, you can use:
json
{
"plugins": ["nextjs"],
"rules": {
"nextjs/no-css-tags": "error"
}
}bash
oxlint --deny nextjs/no-css-tags --nextjs-plugin