Rowind CSS

https://github.com/y7ya-com/rowindcss
Admin
Rowind CSS is a Tailwind CSS utility library for Roact components in Roblox-ts that enables...
Tokens:11,139
Snippets:82
Trust Score:5.9
Update:6 months ago
Show doc for...
Tokens:
Raw
### Complete RowindCSS Component Example

Source: https://context7.com/y7ya-com/rowindcss/llms.txt

This example shows how to combine RowindCSS components like Div, Button, Text, and Input with Roact for a functional UI element. It includes layout, styling, event handling, and hover effects. Ensure Roact and RowindCSS are installed.

```tsx
import Roact from "@rbxts/roact"
import { Div, Button, Text, Input } from '@rbxts/rowindcss'
import { useEffect, useRef, withHookDetection } from "@rbxts/roact-hooked"

withHookDetection(Roact)

export = (target: Instance) => {
    let tree = Roact.mount(<App />, target, "UI")
    return () => Roact.unmount(tree)
}

const App = () => {
    const buttonRef = useRef<TextButton>()

    useEffect(() => {
        if (buttonRef.getValue()) {
            buttonRef.getValue()!.MouseEnter.Connect(() => print("Button hovered"))
        }
    }, [buttonRef])

    return (
        <Div className="w-[500px] h-[50%] rounded-lg border-8 border-opacity-60 border-white bg-white
            top-2/4 left-2/4 origin-center flex flex-col hover:flex-row p-5 items-center gap-4">

            {/* Header text */}
            <Text
                Text="RowindCSS Demo"
                className="w-full font-bold uppercase text-[25px] bg-slate-500 text-white hover:text-yellow-300"
            />

            {/* Button grid */}
            <Div className="w-full h-5/6 flex items-center justify-center gap-5">
                {[1, 2, 3, 4, 5].map((_, i) => (
                    <Button
                        ref={buttonRef}
                        Key={i}
                        Event={{ 
                            MouseButton1Click: () => print(`Button ${i + 1} clicked`)
                        }}
                        className="h-[50px] aspect-[1/1] bg-slate-500 hover:bg-purple-500 hover:rounded-xl hover:w-40"
                    />
                ))}
            </Div>

            {/* Input field */}
            <Input
                placeholder="Type something..."
                className="w-full h-10 bg-gray-100 text-gray-900 rounded-md px-4"
            />
        </Div>
    )
}
```

--------------------------------

### Install RowindCSS with npm

Source: https://github.com/y7ya-com/rowindcss/blob/main/README.md

Install the RowindCSS package using npm. This command adds the necessary library to your project for using TailwindCSS with Roact.

```bash
npm i @rbxts/rowindcss
```

--------------------------------

### Justify Content Options with Flexbox

Source: https://context7.com/y7ya-com/rowindcss/llms.txt

Demonstrates different justify-content options ('start', 'center', 'end') for horizontal alignment of flex items within a Div component.

```tsx
// Justify content options
<Div className="w-full flex justify-start gap-2 bg-gray-700">  // Left aligned
    <Div className="w-10 h-10 bg-white" />
    <Div className="w-10 h-10 bg-white" />
</Div>
<Div className="w-full flex justify-center gap-2 bg-gray-600"> // Center aligned
    <Div className="w-10 h-10 bg-white" />
    <Div className="w-10 h-10 bg-white" />
</Div>
<Div className="w-full flex justify-end gap-2 bg-gray-500">    // Right aligned
    <Div className="w-10 h-10 bg-white" />
    <Div className="w-10 h-10 bg-white" />
</Div>
```

--------------------------------

### Install RowindCSS with Yarn

Source: https://github.com/y7ya-com/rowindcss/blob/main/README.md

Install the RowindCSS package using Yarn. This is the first step to integrate TailwindCSS classes into your Roact and Roblox-ts projects.

```bash
yarn add @rbxts/rowindcss
```

--------------------------------

### Attaching References to Rowind Components

Source: https://github.com/y7ya-com/rowindcss/blob/main/README.md

Example of how to attach a reference to a Rowind component using the 'ref' property. This is useful for imperative access to component instances.

```html
<Button ref={yourRef}/>
```

--------------------------------

### Align Items Options with Flexbox

Source: https://context7.com/y7ya-com/rowindcss/llms.txt

Demonstrates different align-items options ('start', 'center', 'end') for vertical alignment of flex items within a Div component.

```tsx
// Align items options
<Div className="w-full h-32 flex items-start bg-gray-700">   // Top aligned
    <Div className="w-10 h-10 bg-cyan-500" />
</Div>
<Div className="w-full h-32 flex items-center bg-gray-600"> // Center aligned
    <Div className="w-10 h-10 bg-cyan-500" />
</Div>
<Div className="w-full h-32 flex items-end bg-gray-500">    // Bottom aligned
    <Div className="w-10 h-10 bg-cyan-500" />
</Div>
```

--------------------------------

### RowindCSS Component Usage

Source: https://github.com/y7ya-com/rowindcss/blob/main/README.md

Demonstrates how to import and use Rowind components like Div, Button, and Text with TailwindCSS classes in a Roact component. This example showcases various styling properties.

```tsx
    import { Div, Button, Text } from '@rbxts/rowindcss'

    export const Test = () => {
        return (
            <Div className="w-full h-48 p-10 border-4 overflow-y border-red-700 border-opacity-50 flex justify-center items-end gap-3 top-2/4 left-2/4 rounded-xl bg-blue-500">
                <Div className="w-10 h-10 rounded-sm"/>
                <Div className="w-10 h-10 rounded-lg bg-yellow-300"/>
                <Div className="w-10 h-10 bg-green-700"/>
                <Button Event={{
                  MouseButton1Click: () => {
                    print("clicked")
                  }
                }}
                Text="X" className="w-10 h-10 rounded-full bg-red-700"/>
                <Text Text="Y" className="w-10 h-10 rounded-full bg-purple-800"/>
            </Div>
        )
    }
```

--------------------------------

### RowindCSS Button Component Examples

Source: https://context7.com/y7ya-com/rowindcss/llms.txt

The Button component renders a Roblox TextButton with Tailwind styling and click event handling. Supports text content, hover states, and visual styling. Refs can be used for advanced event handling.

```tsx
import { Button } from '@rbxts/rowindcss'

// Basic button with click handler
<Button
    Text="Click Me"
    Event={{
        MouseButton1Click: () => print("Button clicked!")
    }}
    className="w-32 h-10 bg-blue-500 text-white rounded-md"
/>
```

```tsx
// Button with hover effects
<Button
    Text="Hover Me"
    Event={{
        MouseButton1Click: () => print("Action triggered")
    }}
    className="h-[50px] aspect-[1/1] bg-slate-500 hover:bg-purple-500 hover:rounded-xl hover:w-40"
/>
```

```tsx
// Icon-style circular button
<Button
    Text="X"
    Event={{
        MouseButton1Click: () => print("Close")
    }}
    className="w-10 h-10 rounded-full bg-red-700 text-white font-bold"
/>
```

```tsx
// Using refs for advanced event handling
const buttonRef = useRef<TextButton>()
useEffect(() => {
    if (buttonRef.getValue()) {
        buttonRef.getValue()!.MouseEnter.Connect(() => print("Hovered button"))
    }
}, [buttonRef])

<Button
    ref={buttonRef}
    Text="Advanced"
    className="w-24 h-8 bg-indigo-600 text-white rounded-sm"
/>
```

--------------------------------

### RowindCSS Div Component Examples

Source: https://context7.com/y7ya-com/rowindcss/llms.txt

The Div component renders a Roblox Frame with Tailwind CSS styling. Use it for layouts, sizing, backgrounds, and borders. Supports flexbox, positioning, and event handling via refs.

```tsx
import { Div } from '@rbxts/rowindcss'

// Basic container with sizing and background
<Div className="w-full h-48 bg-blue-500">
    <Div className="w-10 h-10 bg-white" />
</Div>
```

```tsx
// Flexbox layout with alignment and gap
<Div className="w-full h-full flex flex-col items-center justify-center gap-4">
    <Div className="w-20 h-20 bg-red-500 rounded-lg" />
    <Div className="w-20 h-20 bg-green-500 rounded-lg" />
    <Div className="w-20 h-20 bg-yellow-500 rounded-lg" />
</Div>
```

```tsx
// Positioned and centered container with border
<Div className="w-[500px] h-[50%] rounded-lg border-8 border-opacity-60 border-white bg-white
    top-2/4 left-2/4 origin-center flex flex-col p-5 items-center gap-4">
    {/* Child content */}
</Div>
```

```tsx
// Using refs and events
const containerRef = useRef<Frame>()
<Div
    ref={containerRef}
    Event={{
        MouseEnter: () => print("Hovered container"),
        MouseLeave: () => print("Left container")
    }}
    className="w-full h-full bg-slate-800">
    {/* Child content */}
</Div>
```

--------------------------------

### RowindCSS Text Component Examples

Source: https://context7.com/y7ya-com/rowindcss/llms.txt

The Text component renders a Roblox TextLabel for styled text. Supports text sizing, colors, font weights, alignment, and transformations. Hover effects can change text color.

```tsx
import { Text } from '@rbxts/rowindcss'

// Basic styled text
<Text Text="Hello World" className="text-2xl text-white bg-slate-500" />
```

```tsx
// Text with font weight and transformation
<Text Text="important title" className="w-full font-bold uppercase text-[25px] text-white" />
```

```tsx
// Centered text with background
<Text Text="Centered Content" className="w-full h-12 text-center text-lg bg-gray-800 text-white" />
```

```tsx
// Text with various sizes (xs through 9xl)
<Text Text="Small" className="text-xs text-gray-500" />
<Text Text="Base" className="text-base text-gray-700" />
<Text Text="Large" className="text-lg text-gray-900" />
<Text Text="Extra Large" className="text-4xl text-black font-extrabold" />
```

```tsx
// Text with hover color change
<Text
    Text="Hover for color change"
    className="w-full text-lg bg-slate-500 text-white hover:text-yellow-300"
/>
```

```tsx
// Text alignment options
<Text Text="Left aligned" className="w-full text-left text-white" />
<Text Text="Center aligned" className="w-full text-center text-white" />
<Text Text="Right aligned" className="w-full text-right text-white" />
```

--------------------------------

### Arbitrary Pixel and Percentage Sizing with Div

Source: https://context7.com/y7ya-com/rowindcss/llms.txt

Demonstrates using bracket notation for arbitrary pixel and percentage values to control Div component dimensions.

```tsx
// Arbitrary pixel values
<Div className="w-[500px] h-[200px] bg-indigo-600" />
<Div className="w-[100px] h-[100px] bg-pink-500" />

// Arbitrary percentage values
<Div className="w-[50%] h-[75%] bg-orange-500" />
```

--------------------------------

### Fractional and Percentage Sizing with Div

Source: https://context7.com/y7ya-com/rowindcss/llms.txt

Demonstrates using Tailwind CSS classes for fractional and percentage-based dimensions on a Div component.

```tsx
// Fractional/percentage sizes
<Div className="w-full h-full bg-slate-800" />        // 100% width and height
<Div className="w-1/2 h-1/3 bg-purple-500" />         // 50% width, 33% height
<Div className="w-2/3 h-3/4 bg-yellow-500" />         // 66% width, 75% height
<Div className="w-5/6 h-1/4 bg-cyan-500" />           // 83% width, 25% height
```

--------------------------------

### Auto Sizing with Div

Source: https://context7.com/y7ya-com/rowindcss/llms.txt

Demonstrates using 'w-auto' and 'h-auto' classes for content-based sizing of a Div component.

```tsx
// Auto sizing (content-based)
<Div className="w-auto h-auto bg-teal-500 p-4">
    <Text Text="Auto-sized container" className="text-white" />
</Div>
```

--------------------------------

### Min/Max Size Constraints with Div

Source: https://context7.com/y7ya-com/rowindcss/llms.txt

Demonstrates using min-width, max-width, min-height, and max-height classes to constrain Div component dimensions.

```tsx
// Min/max size constraints
<Div className="w-full min-w-[200px] max-w-[600px] h-auto bg-rose-500" />
<Div className="w-1/2 min-h-[100px] max-h-[400px] bg-emerald-500" />
```

--------------------------------

### Initialize Tailwind CSS

Source: https://github.com/y7ya-com/rowindcss/blob/main/README.md

Initialize Tailwind CSS in your project root to enable autocomplete for Tailwind classes. This command generates a `tailwind.config.js` file.

```bash
npx tailwindcss init
```

--------------------------------

### Apply Positioning Classes

Source: https://context7.com/y7ya-com/rowindcss/llms.txt

Control element placement using absolute positioning, anchor points, fractional values, and z-index layering.

```tsx
import { Div } from '@rbxts/rowindcss'

// Position from edges (top, left, right, bottom)
<Div className="w-10 h-10 top-0 left-0 bg-red-500" />        // Top-left corner
<Div className="w-10 h-10 top-0 right-0 bg-green-500" />     // Top-right
<Div className="w-10 h-10 bottom-0 left-0 bg-blue-500" />    // Bottom-left
<Div className="w-10 h-10 bottom-0 right-0 bg-yellow-500" /> // Bottom-right

// Center positioning with origin
<Div className="w-32 h-32 top-2/4 left-2/4 origin-center bg-purple-500" />  // Centered

// Origin/anchor point options
<Div className="top-0 left-0 origin-top-left bg-white" />      // Anchor at top-left
<Div className="top-0 left-2/4 origin-top bg-white" />         // Anchor at top-center
<Div className="top-0 right-0 origin-top-right bg-white" />    // Anchor at top-right
<Div className="top-2/4 left-0 origin-left bg-white" />        // Anchor at middle-left
<Div className="top-2/4 left-2/4 origin-center bg-white" />    // Anchor at center
<Div className="top-2/4 right-0 origin-right bg-white" />      // Anchor at middle-right
<Div className="bottom-0 left-0 origin-bottom-left bg-white" />   // Anchor at bottom-left
<Div className="bottom-0 left-2/4 origin-bottom bg-white" />      // Anchor at bottom-center
<Div className="bottom-0 right-0 origin-bottom-right bg-white" /> // Anchor at bottom-right

// Fractional positions
<Div className="w-10 h-10 top-1/4 left-1/4 bg-cyan-500" />   // 25% from top-left
<Div className="w-10 h-10 top-1/3 left-2/3 bg-pink-500" />   // 33% top, 66% left
<Div className="w-10 h-10 top-3/4 left-1/2 bg-orange-500" /> // 75% top, 50% left

// Arbitrary pixel positions
<Div className="w-10 h-10 top-[100px] left-[50px] bg-lime-500" />

// Arbitrary percentage positions
<Div className="w-10 h-10 top-[25%] left-[75%] bg-amber-500" />

// Z-index layering
<Div className="w-20 h-20 top-10 left-10 z-0 bg-red-500" />  // Background layer
<Div className="w-20 h-20 top-12 left-12 z-10 bg-green-500" /> // Middle layer
<Div className="w-20 h-20 top-14 left-14 z-20 bg-blue-500" />  // Top layer
```

--------------------------------

### Basic Text Input with Placeholder

Source: https://context7.com/y7ya-com/rowindcss/llms.txt

Renders a Roblox TextBox for user text input with Tailwind styling support. Accepts placeholder text and supports all text styling classes.

```tsx
import { Input } from '@rbxts/rowindcss'

// Basic text input with placeholder
<Input
    placeholder="Enter your name..."
    className="w-64 h-10 bg-white text-black rounded-md p-2"
/>
```

--------------------------------

### Input with Ref Access

Source: https://context7.com/y7ya-com/rowindcss/llms.txt

Renders a Roblox TextBox for user text input with Tailwind styling support. Accepts placeholder text and supports all text styling classes. Allows access via a ref.

```tsx
// Input with ref access
const inputRef = useRef<TextBox>()
<Input
    ref={inputRef}
    placeholder="Controlled input"
    className="w-full h-10 bg-white text-black border-1 border-blue-500 rounded-md"
/>
```

--------------------------------

### Input with Event Handling

Source: https://context7.com/y7ya-com/rowindcss/llms.txt

Renders a Roblox TextBox for user text input with Tailwind styling support. Accepts placeholder text and supports all text styling classes. Handles focus lost events.

```tsx
// Input with event handling
<Input
    placeholder="Type here"
    Event={{
        FocusLost: (enterPressed) => {
            if (enterPressed) {
                print("User submitted input")
            }
        }
    }}
    className="w-48 h-8 bg-slate-700 text-white rounded-sm p-2"
/>
```

--------------------------------

### Maintain Proportions with Aspect Ratio and Scale Classes

Source: https://context7.com/y7ya-com/rowindcss/llms.txt

Use aspect ratio classes like `aspect-[1/1]` or `aspect-[16/9]` to maintain element proportions. Scale classes like `scale-50` or `scale-150` resize elements uniformly.

```tsx
import { Div, Button } from '@rbxts/rowindcss'

// Square aspect ratio (1:1)
<Div className="h-[50px] aspect-[1/1] bg-blue-500" />
<Button Text="1" className="h-[50px] aspect-[1/1] bg-purple-500" />

// Common aspect ratios
<Div className="w-32 aspect-[16/9] bg-red-500" />   // Widescreen 16:9
<Div className="w-32 aspect-[4/3] bg-green-500" />  // Standard 4:3
<Div className="w-32 aspect-[21/9] bg-yellow-500" /> // Ultra-wide
<Div className="w-32 aspect-[1/2] bg-pink-500" />   // Portrait 1:2

// Scale transform
<Div className="w-20 h-20 scale-50 bg-cyan-500" />  // 50% scale
<Div className="w-20 h-20 scale-75 bg-cyan-600" />  // 75% scale
<Div className="w-20 h-20 scale-100 bg-cyan-700" /> // 100% scale (normal)
<Div className="w-20 h-20 scale-125 bg-cyan-800" /> // 125% scale
<Div className="w-20 h-20 scale-150 bg-cyan-900" /> // 150% scale

// Responsive square buttons
<Div className="flex flex-row gap-4">
    {[1, 2, 3, 4, 5].map((_, i) => (
        <Button
            Key={i}
            className="h-[50px] aspect-[1/1] bg-slate-500 hover:bg-purple-500 hover:rounded-xl"
        />
    ))}
</Div>
```

--------------------------------

### Implement Responsive Design with useBreakpoint

Source: https://context7.com/y7ya-com/rowindcss/llms.txt

Detect screen size changes using the useBreakpoint hook. Returns an array of active breakpoints, where the first element is the largest active one.

```tsx
import { Div, Text } from '@rbxts/rowindcss'
import useBreakpoint, { Breakpoint } from '@rbxts/rowindcss/hooks/useBreakpoint'

// Breakpoint values:
// "" (base): 0px
// sm: 640px
// md: 768px
// lg: 1024px
// xl: 1280px
// 2xl: 1536px
// 3xl: 1920px

const ResponsiveComponent = () => {
    const breakpoints = useBreakpoint()
    const currentBreakpoint = breakpoints[0] // Largest active breakpoint

    // Conditional rendering based on breakpoint
    return (
        <Div className="w-full h-full flex items-center justify-center">
            {currentBreakpoint === "lg" || currentBreakpoint === "xl" ? (
                <Div className="w-96 h-64 bg-blue-500">
                    <Text Text="Large screen layout" className="text-white" />
                </Div>
            ) : (
                <Div className="w-48 h-32 bg-green-500">
                    <Text Text="Small screen layout" className="text-white" />
                </Div>
            )}
        </Div>
    )
}

// Responsive styles based on breakpoint
const AdaptiveGrid = () => {
    const breakpoints = useBreakpoint()
    const isLarge = breakpoints.includes("lg" as Breakpoint)

    return (
        <Div className={`w-full h-full flex ${isLarge ? "flex-row" : "flex-col"} gap-4`}>
            <Div className="w-full h-20 bg-red-500" />
            <Div className="w-full h-20 bg-green-500" />
            <Div className="w-full h-20 bg-blue-500" />
        </Div>
    )
}
```

--------------------------------

### Apply Text Styling Classes

Source: https://context7.com/y7ya-com/rowindcss/llms.txt

Use these classes to control font size, weight, alignment, transformation, and line height. Requires the Text component from @rbxts/rowindcss.

```tsx
import { Text } from '@rbxts/rowindcss'

// Text sizes (xs through 9xl)
<Text Text="Extra Small" className="text-xs text-white" />   // 12px
<Text Text="Small" className="text-sm text-white" />          // 14px
<Text Text="Base" className="text-base text-white" />         // 16px
<Text Text="Large" className="text-lg text-white" />          // 18px
<Text Text="Extra Large" className="text-xl text-white" />    // 20px
<Text Text="2XL" className="text-2xl text-white" />           // 24px
<Text Text="3XL" className="text-3xl text-white" />           // 30px
<Text Text="4XL" className="text-4xl text-white" />           // 36px
<Text Text="5XL" className="text-5xl text-white" />           // 48px

// Arbitrary text size
<Text Text="Custom size" className="text-[25px] text-white" />

// Font weights
<Text Text="Thin" className="font-thin text-white" />
<Text Text="Extra Light" className="font-extra-light text-white" />
<Text Text="Light" className="font-light text-white" />
<Text Text="Normal" className="font-normal text-white" />
<Text Text="Medium" className="font-medium text-white" />
<Text Text="Bold" className="font-bold text-white" />
<Text Text="Extra Bold" className="font-extrabold text-white" />

// Text alignment
<Text Text="Left aligned" className="w-full text-left text-white" />
<Text Text="Center aligned" className="w-full text-center text-white" />
<Text Text="Right aligned" className="w-full text-right text-white" />

// Text transformation
<Text Text="normal text" className="text-white" />
<Text Text="uppercase text" className="uppercase text-white" />     // UPPERCASE TEXT
<Text Text="lowercase text" className="lowercase text-white" />     // lowercase text
<Text Text="capitalize text" className="capitalize text-white" />   // Capitalize text

// Line height / leading
<Text Text="Line height" className="leading-none text-white" />    // 1.0
<Text Text="Line height" className="leading-tight text-white" />   // 1.25
<Text Text="Line height" className="leading-normal text-white" />  // 1.5
<Text Text="Line height" className="leading-loose text-white" />   // 2.0

// Combined text styling
<Text
    Text="styled heading"
    className="w-full font-bold uppercase text-2xl text-center text-white bg-slate-800"
/>
```

--------------------------------

### Apply Padding Classes

Source: https://context7.com/y7ya-com/rowindcss/llms.txt

Use these classes to manage internal spacing for elements. Supports all-sides, axis-specific, individual side, and arbitrary pixel values.

```tsx
import { Div, Text } from '@rbxts/rowindcss'

// All-sides padding (p-0 through p-96)
<Div className="w-full h-auto bg-gray-800 p-4">
    <Text Text="16px padding all around" className="text-white" />
</Div>

// Larger padding values
<Div className="w-full bg-slate-700 p-10">
    <Text Text="40px padding" className="text-white" />
</Div>

// Horizontal padding (px)
<Div className="w-full bg-blue-800 px-8">
    <Text Text="32px left/right padding" className="text-white" />
</Div>

// Vertical padding (py)
<Div className="w-full bg-green-800 py-6">
    <Text Text="24px top/bottom padding" className="text-white" />
</Div>

// Individual sides
<Div className="w-full bg-red-800 pt-4">    {/* Top only */}
    <Text Text="16px top padding" className="text-white" />
</Div>
<Div className="w-full bg-yellow-800 pb-4"> {/* Bottom only */}
    <Text Text="16px bottom padding" className="text-white" />
</Div>
<Div className="w-full bg-purple-800 pl-4"> {/* Left only */}
    <Text Text="16px left padding" className="text-white" />
</Div>
<Div className="w-full bg-pink-800 pr-4">   {/* Right only */}
    <Text Text="16px right padding" className="text-white" />
</Div>

// Combined padding with flex layout
<Div className="w-full h-auto flex flex-col gap-2 p-5 bg-slate-900">
    <Div className="w-full h-10 bg-cyan-500" />
    <Div className="w-full h-10 bg-cyan-600" />
    <Div className="w-full h-10 bg-cyan-700" />
</Div>

// Arbitrary padding values
<Div className="w-full bg-indigo-800 p-[25px]">
    <Text Text="25px custom padding" className="text-white" />
</Div>
```

--------------------------------

### Centered Content with Flexbox

Source: https://context7.com/y7ya-com/rowindcss/llms.txt

Demonstrates centering content on both axes using flexbox 'items-center' and 'justify-center' classes on a Div component.

```tsx
// Centered content (both axes)
<Div className="w-full h-full flex items-center justify-center bg-slate-900">
    <Div className="w-32 h-32 bg-yellow-500 rounded-lg" />
</Div>
```

--------------------------------

### Apply Styles on Hover with `hover:` Prefix

Source: https://context7.com/y7ya-com/rowindcss/llms.txt

Use the `hover:` prefix to apply styles when an element is hovered. This supports various visual properties for interactive feedback.

```tsx
import { Div, Button, Text } from '@rbxts/rowindcss'

// Background color change on hover
<Div className="w-20 h-20 bg-blue-500 hover:bg-blue-700" />
<Button Text="Hover" className="w-24 h-10 bg-green-500 hover:bg-green-700 text-white" />

// Multiple hover properties
<Button
    Text="Multi-effect"
    className="h-[50px] aspect-[1/1] bg-slate-500 hover:bg-purple-500 hover:rounded-xl hover:w-40"
/>

// Text color change on hover
<Text
    Text="Hover for color"
    className="w-full font-bold text-[25px] bg-slate-500 text-white hover:text-yellow-300"
/>

// Layout change on hover (flex direction)
<Div className="w-full h-auto flex flex-col hover:flex-row items-center gap-4 p-5 bg-gray-900">
    <Div className="w-16 h-16 bg-red-500 rounded-md" />
    <Div className="w-16 h-16 bg-green-500 rounded-md" />
    <Div className="w-16 h-16 bg-blue-500 rounded-md" />
</Div>

// Border radius change on hover
<Div className="w-20 h-20 bg-pink-500 rounded-none hover:rounded-full" />

// Size change on hover
<Div className="w-10 h-10 bg-orange-500 hover:w-20 hover:h-20" />

// Combined interactive button
<Button
    Text="Interactive"
    Event={{
        MouseButton1Click: () => print("Clicked!")
    }}
    className="w-32 h-12 bg-indigo-600 hover:bg-indigo-400 text-white font-bold rounded-lg hover:rounded-xl"
/>
```

--------------------------------

### Import and Register Custom Values

Source: https://github.com/y7ya-com/rowindcss/blob/main/CONTRIBUTING.md

Import the custom value object and add it to the main `values.ts` file to make it accessible.

```typescript
const values = {
    //...
    border
}
```

--------------------------------

### Control Content Clipping and Scrolling with Overflow Classes

Source: https://context7.com/y7ya-com/rowindcss/llms.txt

Use overflow classes to clip content or create scrollable regions. `overflow-hidden` clips content, while `overflow-y`, `overflow-x`, or `overflow` enable scrolling in specified directions.

```tsx
import { Div, Text } from '@rbxts/rowindcss'

// Clip overflowing content
<Div className="w-32 h-32 overflow-hidden bg-gray-800">
    <Div className="w-64 h-64 bg-red-500" /> {/* Clipped to container */}
</Div>

// Vertical scrolling
<Div className="w-64 h-48 overflow-y bg-slate-900">
    <Div className="flex flex-col gap-2">
        {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((i) => (
            <Div Key={i} className="w-full h-12 bg-blue-500">
                <Text Text={`Item ${i}`} className="text-white" />
            </Div>
        ))}
    </Div>
</Div>

// Horizontal scrolling
<Div className="w-48 h-32 overflow-x bg-slate-800">
    <Div className="flex flex-row gap-2">
        {[1, 2, 3, 4, 5, 6, 7, 8].map((i) => (
            <Div Key={i} className="w-24 h-24 bg-green-500">
                <Text Text={`${i}`} className="text-white text-center" />
            </Div>
        ))}
    </Div>
</Div>

// Both directions scrolling
<Div className="w-48 h-48 overflow bg-slate-700">
    <Div className="w-96 h-96 bg-gradient-to-br from-purple-500 to-pink-500" />
</Div>

// Scrollable list with border styling
<Div className="w-full h-48 overflow-y border-4 border-white rounded-lg bg-gray-900 p-4">
    <Div className="flex flex-col gap-3">
        <Div className="w-full h-10 bg-cyan-600 rounded-md" />
        <Div className="w-full h-10 bg-cyan-500 rounded-md" />
        <Div className="w-full h-10 bg-cyan-400 rounded-md" />
        <Div className="w-full h-10 bg-cyan-300 rounded-md" />
        <Div className="w-full h-10 bg-cyan-200 rounded-md" />
    </Div>
</Div>
```

--------------------------------

### Combined Flexbox Layout with Hover State

Source: https://context7.com/y7ya-com/rowindcss/llms.txt

Demonstrates a combined flexbox layout with a hover state that changes the flex direction. Includes mapping over an array to create multiple elements.

```tsx
// Combined layout with hover state
<Div className="w-full h-full flex flex-col hover:flex-row items-center gap-4 p-5">
    {[1, 2, 3].map((i) => (
        <Div Key={i} className="w-20 h-20 bg-blue-500 rounded-md" />
    ))}
</Div>
```

--------------------------------

### Styled Input with Border

Source: https://context7.com/y7ya-com/rowindcss/llms.txt

Renders a Roblox TextBox for user text input with Tailwind styling support. Accepts placeholder text and supports all text styling classes.

```tsx
// Styled input with border
<Input
    Text=""
    placeholder="Search..."
    className="w-full h-12 bg-gray-100 text-gray-900 border-2 border-gray-300 rounded-lg px-4"
/>
```

--------------------------------

### Horizontal Row Layout with Flexbox

Source: https://context7.com/y7ya-com/rowindcss/llms.txt

Demonstrates a horizontal row layout using flexbox classes on a Div component. Includes gap spacing between items.

```tsx
// Horizontal row layout (default)
<Div className="w-full h-32 flex flex-row gap-4 bg-gray-900">
    <Div className="w-16 h-16 bg-red-500" />
    <Div className="w-16 h-16 bg-green-500" />
    <Div className="w-16 h-16 bg-blue-500" />
</Div>
```

--------------------------------

### Fixed Pixel Sizing with Div

Source: https://context7.com/y7ya-com/rowindcss/llms.txt

Demonstrates using Tailwind CSS classes for fixed pixel dimensions on a Div component. Supports the standard 0-96 scale.

```tsx
// Fixed pixel sizes (0-96 scale)
<Div className="w-10 h-10 bg-red-500" />    // 40x40 pixels
<Div className="w-32 h-16 bg-blue-500" />   // 128x64 pixels
<Div className="w-64 h-48 bg-green-500" />  // 256x192 pixels
```

--------------------------------

### Vertical Column Layout with Flexbox

Source: https://context7.com/y7ya-com/rowindcss/llms.txt

Demonstrates a vertical column layout using flexbox classes on a Div component. Includes gap spacing between items.

```tsx
// Vertical column layout
<Div className="w-64 h-full flex flex-col gap-2 bg-gray-800">
    <Div className="w-full h-12 bg-purple-500" />
    <Div className="w-full h-12 bg-pink-500" />
    <Div className="w-full h-12 bg-indigo-500" />
</Div>
```

--------------------------------

### Apply Background Colors with RowindCSS

Source: https://context7.com/y7ya-com/rowindcss/llms.txt

Use 'bg-' classes to apply colors from Tailwind's palette, including shades 50-900. Supports arbitrary hex and RGB values for custom colors. Also demonstrates text color classes.

```tsx
import { Div, Text } from '@rbxts/rowindcss'

// Tailwind color palette (50-900 shades)
<Div className="w-full h-10 bg-red-500" />
<Div className="w-full h-10 bg-blue-700" />
<Div className="w-full h-10 bg-green-300" />
<Div className="w-full h-10 bg-yellow-600" />
<Div className="w-full h-10 bg-purple-800" />

// All available color families
<Div className="bg-slate-500" />
<Div className="bg-gray-500" />
<Div className="bg-zinc-500" />
<Div className="bg-neutral-500" />
<Div className="bg-red-500" />
<Div className="bg-orange-500" />
<Div className="bg-amber-500" />
<Div className="bg-yellow-500" />
<Div className="bg-lime-500" />
<Div className="bg-green-500" />
<Div className="bg-emerald-500" />
<Div className="bg-teal-500" />
<Div className="bg-cyan-500" />
<Div className="bg-sky-500" />
<Div className="bg-blue-500" />
<Div className="bg-indigo-500" />
<Div className="bg-violet-500" />
<Div className="bg-purple-500" />
<Div className="bg-fuchsia-500" />
<Div className="bg-pink-500" />
<Div className="bg-rose-500" />

// Black, white, and transparent
<Div className="w-full h-10 bg-black" />
<Div className="w-full h-10 bg-white" />
<Div className="w-full h-10 bg-transparent" />

// Arbitrary hex color values
<Div className="w-full h-10 bg-[#ff5733]" />
<Div className="w-full h-10 bg-[#1abc9c]" />

// Arbitrary RGB color values
<Div className="w-full h-10 bg-[rgb(255,100,50)]" />
<Div className="w-full h-10 bg-[rgb(30,144,255)]" />

// Text colors (same palette)
<Text Text="Red text" className="text-red-500" />
<Text Text="Blue text" className="text-blue-700" />
<Text Text="Custom color" className="text-[#ff00ff]" />
```

--------------------------------

### Style Borders with RowindCSS

Source: https://context7.com/y7ya-com/rowindcss/llms.txt

Control border width, color, opacity, and corner radius using 'border-' and 'rounded-' classes. Borders are rendered as UIStroke instances. Supports arbitrary pixel values for width and percentage/pixel values for radius.

```tsx
import { Div } from '@rbxts/rowindcss'

// Border width (1-8 pixels)
<Div className="w-20 h-20 border-1 border-white" />
<Div className="w-20 h-20 border-2 border-white" />
<Div className="w-20 h-20 border-4 border-white" />
<Div className="w-20 h-20 border-8 border-white" />

// Border colors
<Div className="w-20 h-20 border-4 border-red-500 bg-transparent" />
<Div className="w-20 h-20 border-4 border-blue-700 bg-transparent" />
<Div className="w-20 h-20 border-4 border-[#00ff00] bg-transparent" />

// Border opacity (0-100)
<Div className="w-20 h-20 border-4 border-white border-opacity-100" /> // Fully visible
<Div className="w-20 h-20 border-4 border-white border-opacity-60" />  // 60% visible
<Div className="w-20 h-20 border-4 border-white border-opacity-30" />  // 30% visible
<Div className="w-20 h-20 border-4 border-white border-opacity-0" />   // Invisible

// Combined border styling
<Div className="w-32 h-32 border-8 border-opacity-60 border-white bg-blue-500 rounded-lg" />

// Rounded corners
<Div className="w-20 h-20 bg-white rounded-none" />   // No rounding
<Div className="w-20 h-20 bg-white rounded-sm" />     // 2px radius
<Div className="w-20 h-20 bg-white rounded-md" />     // 6px radius
<Div className="w-20 h-20 bg-white rounded-lg" />     // 8px radius
<Div className="w-20 h-20 bg-white rounded-xl" />     // 12px radius
<Div className="w-20 h-20 bg-white rounded-2xl" />    // 16px radius
<Div className="w-20 h-20 bg-white rounded-3xl" />    // 24px radius
<Div className="w-20 h-20 bg-white rounded-full" />   // Fully circular

// Arbitrary border radius
<Div className="w-20 h-20 bg-white rounded-[10px]" />
<Div className="w-20 h-20 bg-white rounded-[50%]" />
```

--------------------------------

### Tailwind CSS Configuration

Source: https://github.com/y7ya-com/rowindcss/blob/main/README.md

Configure your Tailwind CSS settings by specifying the content paths where your components are located. This ensures Tailwind scans your files for class names.

```javascript
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.tsx",
    "./src/**/**/*.tsx",
    "./src/**/**/**/*.tsx"
],
  theme: {
    extend: {},
  },
  plugins: [],
}
```

--------------------------------

### Define a basic class in classes.ts

Source: https://github.com/y7ya-com/rowindcss/blob/main/src/CONTRIBUTING.md

Add a new class definition to the classes object with its supported value types.

```ts
    w: {
        valueTypes: ["udim"],
    },
```

--------------------------------

### Define Custom Value Type for Border Class

Source: https://github.com/y7ya-com/rowindcss/blob/main/CONTRIBUTING.md

Create a new TypeScript file in the `values` folder to define custom suffixes for a class. This is used when existing types do not support the required suffixes.

```typescript
//border.ts
export default {
    "0": 0,
    "px": 1,
    "1": 1,
    "2": 2,
    "4": 4,
    "8": 8,
}
```

--------------------------------

### Update class with multiple value types

Source: https://github.com/y7ya-com/rowindcss/blob/main/src/CONTRIBUTING.md

Extend a class definition to support multiple value types.

```ts
    w: {
        valueTypes: ["udim", "special"],
    },
```

--------------------------------

### Add Special Value Type for Width Class

Source: https://github.com/y7ya-com/rowindcss/blob/main/CONTRIBUTING.md

Extend the `valueTypes` to include 'special' and define `specialValues` for specific class behaviors like `w-auto`.

```typescript
w: {
        valueTypes: ["udim", "special"],
        specialValues: ["w-auto"]
    },
```

--------------------------------

### Define Width Class in classes.ts

Source: https://github.com/y7ya-com/rowindcss/blob/main/CONTRIBUTING.md

Add a new class definition to `classes.ts`. Specify `valueTypes` to indicate how the class can be parsed.

```typescript
w: {
        valueTypes: ["udim"],
    },
```

--------------------------------

### Define special values for a class

Source: https://github.com/y7ya-com/rowindcss/blob/main/src/CONTRIBUTING.md

Include specific special values for a class that uses the special value type.

```ts
    w: {
        valueTypes: ["udim", "special"],
        specialValues: ["w-auto"]
    },
```

--------------------------------

### Implement Custom Type Handling in getClassValue

Source: https://github.com/y7ya-com/rowindcss/blob/main/CONTRIBUTING.md

Add logic to `utils/getClassValue.ts` to handle the custom value type. This involves checking if the class value string matches any of the defined suffixes for the custom type.

```typescript
const isBorder = classValueTypes.some(classValueType => classValueType === "border")
            && Object.keys(values.border).some(u => u === classValueString)
```

--------------------------------

### Register custom value in values.ts

Source: https://github.com/y7ya-com/rowindcss/blob/main/src/CONTRIBUTING.md

Import and add the new value type to the central values object.

```ts
const values = {
    //...
    border
} 
```

--------------------------------

### Define Custom Type in types.ts

Source: https://github.com/y7ya-com/rowindcss/blob/main/CONTRIBUTING.md

Declare a new type in `types.ts` that maps to the keys of your custom value object. This allows TypeScript to recognize the new type.

```typescript
export type BorderValueName = keyof typeof values.border
```

--------------------------------

### Add Custom Value Type to Class Definition

Source: https://github.com/y7ya-com/rowindcss/blob/main/CONTRIBUTING.md

Finally, update the class definition in `classes.ts` to include the newly implemented custom value type.

```typescript
border: {
    valueTypes: ["color3", "border"]
},
```
Tokens:
Raw