iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
To use a Lottie animation with Tailwind CSS, add a Lottie player to your page and use Tailwind utilities to size and position the element that contains it. The player loads and renders the animation; Tailwind does not play the file. For a responsive result, give the player a deliberate box, make sure the player resizes to that box, and check the layout at both narrow and wide screen sizes.
Choose a Lottie player and animation format
Your integration has three parts: the animation file, a JavaScript player that renders it, and a styled container that controls its place and size in the page. Choose the player for your framework, then confirm it supports the animation format and any features the file uses.
For React
The official @lottiefiles/dotlottie-react package provides a React component and a player reference for playback controls and events. Its documentation demonstrates a DotLottieReact component with a source URL, looping, and autoplay. See the official dotLottie JavaScript player documentation for the React integration and current API details.
Recommended Free Tools
For framework-agnostic browser code
Use @lottiefiles/dotlottie-web when you want to work with the player directly rather than through a React wrapper. It renders through a canvas and accepts a source URL and player options, including autoplay and looping. The same player documentation lists wrappers for other frameworks and Web Components.
#1 Best Overall
JSON or .lottie?
The dotLottie player documentation describes support for both Lottie JSON and .lottie files. The dotLottie specification identifies version 2.0 as its latest recommended version and version 1.0 as widely supported. Version 2 adds format changes and features such as theming and state machines, so verify that the specific player and asset support the features you need. Do not assume every export or advanced feature works in every player.
The format documentation describes .lottie as compressed, but does not quantify a file-size or performance advantage. Choose based on compatibility and asset requirements rather than an assumed speed improvement.
Install and render the player in React
Install the React package using the package manager configured for your project:
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errorsnpm install @lottiefiles/dotlottie-reactThen render the player inside an element whose dimensions you control. This example illustrates the component and Tailwind layout classes; adapt the source URL and dimensions to your app and asset.
import { DotLottieReact } from '@lottiefiles/dotlottie-react';
export function Animation() {
return (
<div className="mx-auto h-64 w-full max-w-lg md:h-80">
<DotLottieReact
src="/animations/scene.lottie"
autoplay
loop
/>
</div>
);
}Replace the example asset path with a URL your app can serve or access. Tailwind classes style the wrapper, not automatically every internal canvas element. Check the React package documentation for the current component props and render configuration, including resize behavior, and confirm the player fills or otherwise respects the wrapper as intended.
Give the animation a predictable size
A player needs a usable width and height. Set those dimensions on the element that should define the animation’s layout, then confirm how the player sizes its canvas inside it. A width without a meaningful height can leave the rendered area unexpectedly small; percentage heights also depend on the parent having a defined height.
Rank #4
- DOLL WITH BOOK Lottie loves to curl up by the fire with her favorite book
- DOLL WITH GLASSES Red storybook & fluffy cream cushion
- DOLL CLOTHES include a long-sleeved striped outfit with adorable pink bows and navy Mary-Jane shoes
- PACKABLE & PORTABLE Perfect for little hands Lottie is ready to gift
- MINI DOLL BOOKS Lottie is ready for adventures in her imagination
Use fixed or responsive dimensions deliberately
For example, w-full h-64 md:h-80 gives a wrapper full available width and a height of 16rem by default, changing to 20rem from Tailwind’s medium breakpoint upward. These values are design choices, not universal Lottie requirements. To keep the animation from becoming too wide, combine them with mx-auto max-w-lg.
If the artwork has a particular aspect ratio, decide whether the player should preserve it, fit inside the box, or fill the box. Check the result visually for stretching, cropping, or unused space. The player’s sizing and layout options—not Tailwind alone—determine how the animation is drawn within its container.
Best Value
- Funny personalized name design perfect to wear for all people who have a great sense of humor and are proud of their forename.
- Funny vintage style artwork with a personalized quote - "I'm Lottie Doing Lottie Things"
- Hardcover journal with 240 line-ruled pages (120 sheets)
- Built-in elastic closure and ribbon bookmark
- Includes an expandable inner storage pocket and a pen holder
Make the layout responsive with Tailwind
Tailwind’s responsive system is mobile-first: unprefixed utilities apply at all sizes, and a prefixed utility applies at its breakpoint and above. For example, h-64 md:h-80 uses the base height until the medium breakpoint, then changes it at that breakpoint. Tailwind Labs’ responsive design documentation lists these default minimum widths:
| Prefix | Default minimum width |
|---|---|
sm: |
40rem |
md: |
48rem |
lg: |
64rem |
xl: |
80rem |
2xl: |
96rem |
These are Tailwind defaults; a project can customize its breakpoint theme. In particular, sm: means 40rem and above by default, not “mobile only.” Check your project’s configuration if a responsive class takes effect at an unexpected width.
A wrapper such as mx-auto w-full max-w-lg h-64 md:h-80 is a practical starting point: it can shrink to the available width, caps its width, and increases in height at medium screens. Choose dimensions that suit the page, and test them at the actual breakpoints your design uses.
Add controls and account for motion
The React player reference can be used to call playback methods such as play, pause, stop, and seek, and to subscribe to playback events. Add visible controls when viewers need to manage playback rather than making autoplay the only way to interact. The exact ref and event APIs can vary by package version, so follow the current package documentation.
If the animation communicates information, provide an equivalent text explanation; do not make motion the only way to understand a status or instruction. If it is decorative, avoid exposing it as meaningful content to assistive technology. These are implementation considerations; the cited player documentation does not specify a complete accessibility or reduced-motion recipe.
Quick Recap
Troubleshoot sizing and playback
- The animation does not appear: Confirm that the installed package matches the import and framework, that the asset URL loads, and that the player supports the file format and features in that asset.
- The animation is tiny or has no visible height: Inspect the wrapper’s computed width and height. If using percentage height, check that its parent supplies a meaningful height.
- The wrapper is correct but the canvas is not: Check the player’s resize and render configuration. Tailwind utilities apply to the element carrying the class and do not automatically size every internal element.
- The animation stretches, crops, or leaves empty space: Review the relationship between the wrapper’s aspect ratio and the player’s layout behavior, then adjust the box or player settings to match the design.
- A responsive class has no effect: Confirm that your Tailwind setup generates the utility and that the project has not customized the relevant breakpoint. Tailwind’s theme documentation explains how theme variables affect available utilities.
- The layout breaks at a particular size: Test at the project’s actual breakpoint boundaries, including a narrow mobile layout and a wide desktop layout, rather than assuming the default Tailwind breakpoints are unchanged.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
