Styling

Use any CSS framework

You can use any CSS framework like UnoCSS because Animotion is just a Svelte project using Vite as the build tool.

You can completely remove Tailwind CSS and replace it with the CSS framework of your choice by reading their guide on how to set it up for Svelte.

Using Tailwind CSS

Every element is unstyled by default giving you complete control over the styles using Tailwind and text is scaled based on the size of your presentation which you can also override with CSS.

Red

Green

Blue

<script>
  import { Presentation, Slide } from '@components'
</script>

<Presentation>
  <Slide>
    <div class="mx-auto flex w-[800px] justify-between text-gray-900">
      <div class="grid h-[240px] w-[240px] place-content-center rounded-full bg-red-400">Red</div>
      <div class="grid h-[240px] w-[240px] place-content-center rounded-full bg-green-400">Green</div>
      <div class="grid h-[240px] w-[240px] place-content-center rounded-full bg-blue-400">Blue</div>
    </div>
  </Slide>
</Presentation>

Thanks to the Tailwind compiler you can also pass arbitrary values surrounded by brackets like h-[240px] if the provided utility classes aren't enough.

Use the Tailwind CSS IntelliSense extension for VS Code to not have to memorize the utility classes and to make your life easier Animotion is set up to sort Tailwind classes on your behalf to keep things organized.

Using Regular CSS

You can write regular CSS inside a <style> tag in Svelte. Styles are scoped to the component meaning you don't have to worry about unique class names — PostCSS works out of the box and you can also set up Sass.

<script>
  import { Presentation, Slide } from '@components'
</script>

<Presentation>
  <Slide>
      <div class="circles">
        <div class="circle red">Red</div>
        <div class="circle green">Green</div>
        <div class="circle blue">Blue</div>
      </div>
  </Slide>
</Presentation>

<style>
  .circles {
    width: 800px;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    color: #111827;
  }

  .circle {
    width: 240px;
    height: 240px;
    display: grid;
    place-content: center;
    rounded: 9999px;
  }

  .red {
    background-color: #f87171;
  }

  .green {
    background-color: #4ade80;
  }

  .blue {
    background-color: #1e3a8a;
  }
</style>