# Source: https://oxc.rs/docs/guide/usage/linter/rules/nextjs/no-css-tags.md

---
url: /docs/guide/usage/linter/rules/nextjs/no-css-tags.md
---

### 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:

::: code-group

```json [Config (.oxlintrc.json)]
{
  "plugins": ["nextjs"],
  "rules": {
    "nextjs/no-css-tags": "error"
  }
}
```

```bash [CLI]
oxlint --deny nextjs/no-css-tags --nextjs-plugin
```

:::

## References

* Rule Source