@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"
    let:width
    let:height
  >
    <Plane
      {width}
      {height}
      color="yellow"
      depth={1}
    />
  </Box>

  <Box
    class="flex-1"
    let:width
  >
    <Plane
      color="blue"
      {width}
      height={44}
      depth={1}
    />
  </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"
    let:width
    let:height
  >
    <!-- … -->
  </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: