@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:

Flex Direction

| Class | CSS Properties | | ------------------ | -------------------------------- | | flex-row | flex-direction: row | | flex-col | flex-direction: column | | flex-row-reverse | flex-direction: row-reverse | | flex-col-reverse | flex-direction: column-reverse |

Flex Wrap

| Class | CSS Properties | | ------------------- | ------------------------- | | flex-wrap | flex-wrap: wrap | | flex-wrap-reverse | flex-wrap: wrap-reverse | | flex-nowrap | flex-wrap: nowrap |

Justify Content

| Class | CSS Properties | | ----------------- | -------------------------------- | | justify-start | justify-content: flex-start | | justify-end | justify-content: flex-end | | justify-center | justify-content: center | | justify-between | justify-content: space-between | | justify-around | justify-content: space-around | | justify-evenly | justify-content: space-evenly |

Align Items

| Class | CSS Properties | | ---------------- | ------------------------- | | items-start | align-items: flex-start | | items-end | align-items: flex-end | | items-center | align-items: center | | items-baseline | align-items: baseline | | items-stretch | align-items: stretch |

Align Content

| Class | CSS Properties | | ------------------ | ------------------------------ | | content-normal | align-content: normal | | content-start | align-content: flex-start | | content-end | align-content: flex-end | | content-center | align-content: center | | content-between | align-content: space-between | | content-around | align-content: space-around | | content-stretch | align-content: stretch | | content-baseline | align-content: baseline |

Gap

value is a number (e.g. 10)

| Class | CSS Properties | Examples | | --------------- | -------------- | ---------- | | gap-{value} | gap | gap-10 | | gap-x-{value} | column-gap | gap-x-10 | | gap-y-{value} | row-gap | gap-y-10 |

Flex Grow

value is a number (e.g. 1)

| Class | CSS Properties | Examples | | -------------- | -------------- | ------------------ | | grow-{value} | flex-grow | grow-1, grow-0 |

Flex Shrink

value is a number (e.g. 1)

| Class | CSS Properties | Examples | | ---------------- | -------------- | ---------------------- | | shrink-{value} | flex-shrink | shrink-1, shrink-0 |

Flex Basis

value can be auto, full, a percentage (e.g. 55%) or a number (e.g. 10).

| Class | CSS Properties | Examples | | --------------- | -------------- | --------------------------------------------------- | | basis-{value} | flex-basis | basis-10, basis-full, basis-55%, basis-auto |

Flex

value is a number (e.g. 1)

| Class | CSS Properties | Examples | | -------------- | -------------- | -------------------- | | flex-{value} | flex | flex-1, flex-0.5 |

Align Self

| Class | CSS Properties | | --------------- | ------------------------ | | self-auto | align-self: auto | | self-start | align-self: flex-start | | self-end | align-self: flex-end | | self-center | align-self: center | | self-stretch | align-self: stretch | | self-baseline | align-self: baseline |

Padding

value can be full, a percentage (e.g. 55%) or a number (e.g. 10).

| Class | CSS Properties | Examples | | ------------ | ----------------------------------- | ---------------------------- | | p-{value} | padding | p-10, p-full, p-55% | | pt-{value} | padding-top | pt-10, pt-full, pt-55% | | pr-{value} | padding-right | pr-10, pr-full, pr-55% | | pb-{value} | padding-bottom | pb-10, pb-full, pb-55% | | pl-{value} | padding-left | pl-10, pl-full, pl-55% | | px-{value} | padding-left
padding-right | px-10, px-full, px-55% | | py-{value} | padding-top
padding-bottom | py-10, py-full, py-55% |

Margin

value can be full, a percentage (e.g. 55%) or a number (e.g. 10).

| Class | CSS Properties | Examples | | ------------ | --------------------------------- | ---------------------------- | | m-{value} | margin | m-10, m-full, m-55% | | mt-{value} | margin-top | mt-10, mt-full, mt-55% | | mr-{value} | margin-right | mr-10, mr-full, mr-55% | | mb-{value} | margin-bottom | mb-10, mb-full, mb-55% | | ml-{value} | margin-left | ml-10, ml-full, ml-55% | | mx-{value} | margin-left
margin-right | mx-10, mx-full, mx-55% | | my-{value} | margin-top
margin-bottom | my-10, my-full, my-55% |

Width

value can be auto, full, a percentage (e.g. 55%) or a number (e.g. 10).

| Class | CSS Properties | Examples | | ----------- | -------------- | ----------------------------------- | | w-{value} | width | w-10, w-full, w-55%, w-auto |

Height

value can be auto, full, a percentage (e.g. 55%) or a number (e.g. 10).

| Class | CSS Properties | Examples | | ----------- | -------------- | ----------------------------------- | | h-{value} | height | h-10, h-full, h-55%, h-auto |

Top, Right, Bottom, Left

value can be a percentage (e.g. 55%) or a number (e.g. 10).

| Class | CSS Properties | Examples | | ---------------- | -------------- | ------------------------- | | top-{value} | top | top-10, top-55% | | right-{value} | right | right-10, right-55% | | bottom-{value} | bottom | bottom-10, bottom-55% | | left-{value} | left | left-10, left-55% |

Aspect Ratio

value can be square, portrait, landscape or an arbitrary ratio (e.g. 32/9).

| Class | CSS Properties | Examples | | ------------------ | ----------------------- | --------------------------- | | aspect-square | aspect-ratio: 1 / 1 | | aspect-portrait | aspect-ratio: 9 / 16 | | aspect-landscape | aspect-ratio: 16 / 9 | | aspect-{value} | aspect-ratio: {value} | aspect-32/9, aspect-2/1 |

Previous Page createClassParser

Next Page Hooks