> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/honojs/hono/llms.txt
> Use this file to discover all available pages before exploring further.
# CSS Helper
> Experimental CSS-in-JS helper for Hono with scoped styles
The CSS Helper is experimental. The API may change in future versions.
The CSS Helper provides CSS-in-JS functionality with automatic scoping, allowing you to write CSS directly in your TypeScript/JavaScript code.
## Import
```typescript theme={null}
import { css, cx, keyframes, Style, createCssContext } from 'hono/css'
```
## Functions
### css()
Defines scoped CSS styles and returns a unique class name.
```typescript theme={null}
function css(
strings: TemplateStringsArray,
...values: CssVariableType[]
): Promise
```
The CSS template string
Values to interpolate into the CSS (variables, other css() results, etc.)
A unique class name for the scoped styles
**Example**
```typescript theme={null}
import { Hono } from 'hono'
import { css, Style } from 'hono/css'
import { html } from 'hono/html'
const app = new Hono()
app.get('/', (c) => {
const className = css`
background-color: #f0f0f0;
color: #333;
padding: 20px;
border-radius: 8px;
&:hover {
background-color: #e0e0e0;
}
`
return c.html(html`
${Style()}
Hello, styled world!
`)
})
```
### cx()
Combines multiple class names, similar to the popular `classnames` library.
```typescript theme={null}
function cx(
...args: (CssClassName | Promise | string | boolean | null | undefined)[]
): Promise
```
Class names to combine. Falsy values are ignored.
Combined class names as a single string
**Example**
```typescript theme={null}
app.get('/button', (c) => {
const baseStyles = css`
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
`
const primaryStyles = css`
background-color: #007bff;
color: white;
`
const isActive = true
const activeStyles = css`
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5);
`
const className = cx(
baseStyles,
primaryStyles,
isActive && activeStyles
)
return c.html(html`
${Style()}
`)
})
```
### keyframes()
Defines CSS keyframe animations.
```typescript theme={null}
function keyframes(
strings: TemplateStringsArray,
...values: CssVariableType[]
): CssClassNameCommon
```
The keyframes template string
Values to interpolate
A keyframes name that can be used in CSS animations
**Example**
```typescript theme={null}
import { css, keyframes, Style } from 'hono/css'
import { html } from 'hono/html'
app.get('/animation', (c) => {
const fadeIn = keyframes`
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
`
const animatedBox = css`
animation: ${fadeIn} 0.5s ease-in-out;
padding: 20px;
background: #007bff;
color: white;
`
return c.html(html`
${Style()}