# @next/next/no-css-tags

> Disallow `<link rel="stylesheet">` for your own CSS files

A stylesheet you add with a `<link>` element skips the Next.js build. It isn't minified or split by page, and its URL has no hash, so browsers can keep showing an old copy after a deploy. If you `import` the file, Next.js does all of that.

The rule reports a `<link>` with `rel="stylesheet"` and an `href` that's a plain string. An `href` that starts with `http://` or `https://` is allowed, because you can't import a file from another site.

{/* Generated by src/codegen/lint-rule-docs.ts. Do not edit this section. */}

## Configure

Off by default. To turn it on:

```toml bunfig.toml
[lint.rules]
"@next/next/no-css-tags" = "error" # or "warn"
```

{/* End of the generated section. */}

## Examples

Reported:

{/* bad */}
```jsx
export default function Layout({ children }) {
  return (
    <div>
      <link rel="stylesheet" href="/styles/site.css" />
      {children}
    </div>
  );
}
```

Not reported:

{/* good */}
```jsx
import "../styles/site.css";

export default function Layout({ children }) {
  return <div>{children}</div>;
}
```

{/* good */}
```jsx
const theme = <link rel="stylesheet" href="https://example.com/theme.css" />;
```