@threlte/flex

tailwindParser

@threlte/flex ships with a default parser for Tailwind-like classes on <Flex> and <Box> components. If you are familiar with Tailwind, you will feel right at home.

<Flex
  width={300}
  height={300}
  classParser={tailwindParser}
  class="flex-col items-center justify-center gap-10 p-10"
>
  <Box class="w-100 h-full shrink-0">
    {#snippet children({ width, height })}
      <Plane
        {width}
        {height}
        color="yellow"
        depth={1}
      />
    {/snippet}
  </Box>

  <Box class="flex-1">
    {#snippet children({ width })}
      <Plane
        color="blue"
        {width}
        height={44}
        depth={1}
      />
    {/snippet}
  </Box>
</Flex>

Usage

Add the classParser prop to your <Flex> or <Box> component and pass in the tailwindParser function.

<script>
  import { Flex, Box, Plane, tailwindParser } from '@threlte/flex'
</script>

<Flex
  width={300}
  height={300}
  classParser={tailwindParser}
  class="flex-col items-center justify-center gap-10 p-10"
>
  <Box class="h-100 w-100">
    {#snippet children({ width, height })}
      <!-- … -->
    {/snippet}
  </Box>
</Flex>

Differences to Tailwind

The syntax is very similar to Tailwind, with a few differences:

• If a value is a number, it is interpreted as a unit in Three.js. For example, gap-10 will set the gap to 10 Three.js units.
• As opposed to Tailwind, you are not limited to the default set of values. You can use any value: gap-17.5 will set the gap to 17.5 Three.js units. p-56% will set the padding to 56% of the parent’s width. Do not wrap the value in brackets as you would do with custom values in Tailwind CSS.

Supported Props

The following props are supported by the Tailwind parser: