# Tailwind CSS

Tailwind CSS — Legend Motion documentation.

Source: https://legend.so/motion/v2/usage/tailwind-css/

Legend Motion v2 documentation. Current documentation version.

Legend-Motion includes a special set of Motion components that support TailwindCSS `className` by using [NativeWind](https://www.nativewind.dev/).

```jsx
<Motion.View
  className="items-center justify-center p-4"
  animate={{ x: value * 50 }}
>
  <Motion.Text className="font-bold text-white">RN View</Motion.Text>
</Motion.View>
<Motion.View
  className="items-center justify-center p-4 mt-8"
  whileHover={{ scale: 1.1 }}
  whileTap={{ x: 30 }}
>
  <Motion.Text className="font-bold text-white">Press me</Motion.Text>
</Motion.View>
```

## [Installation](https://legend.so/motion/v2/usage/tailwind-css/#installation)

1.  This depends on [NativeWind](https://www.nativewind.dev/) so first follow its [installation steps](https://www.nativewind.dev/).
    
2.  Then pass `styled` into `configureMotion`
    

```js
import { styled } from "nativewind";
import { configureMotion } from "@legendapp/motion";

configureMotion({ styled });
```

  

3.  Then just change the Motion import to `/styled`

```js
import { Motion } from "@legendapp/motion/styled";
```

[View Markdown](https://legend.so/motion/v2/usage/tailwind-css.md)[Report a documentation correction](https://github.com/LegendApp/legend-docs/issues/new?title=Docs%3A+Tailwind+CSS&body=Page%3A+https%3A%2F%2Flegend.so%2Fmotion%2Fv2%2Fusage%2Ftailwind-css%0A%0AWhat+is+incorrect+or+missing%3F%0A%0AExpected+behavior+or+supporting+source%3A%0A)