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