RoWindCSS

https://github.com/yayashn/rowindcss
Admin
RowindCSS provides TailwindCSS classes for Roact and Roblox-ts, enabling developers to style their...
Tokens:2,558
Snippets:22
Trust Score:5.9
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install RowindCSS with Yarn

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

Installs the RowindCSS package using Yarn, a popular package manager for JavaScript projects.

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

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

### Create a Custom Value Type File

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

Provides an example of creating a new file (e.g., `border.ts`) in the `values` folder to define custom suffixes and their corresponding numerical values for a specific class, like 'border'.

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

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

### Install RowindCSS with npm

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

Installs the RowindCSS package using npm, the Node.js package manager.

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

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

### Define a New Class in classes.ts

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

Illustrates the basic structure for defining a new class (e.g., 'w' for width) within the `classes.ts` object, specifying its initial value types.

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

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

### Implement custom value type handling logic in getClassValue.ts

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

Provides an example of how to add logic within `utils/getClassValue.ts` to identify and process a new custom value type (e.g., 'border'). This snippet demonstrates checking if the class value type matches 'border' and if the string corresponds to a defined border value.

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

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

### Import Custom Value Type into values.ts

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

Illustrates how to import a newly created custom value type (e.g., 'border') and integrate it into the main `values` object in `values/values.ts`.

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

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

### Define Special Values for a Class

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

Shows how to explicitly list 'specialValues' within a class definition in `classes.ts` to map specific class names (e.g., 'w-auto') to their corresponding special behaviors.

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

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

### Implement Custom Value Type Handling Logic

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

Demonstrates how to add logic within `utils/getClassValue.ts` to identify and process custom value types (e.g., 'border') based on their presence in `classValueTypes` and `values`.

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

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

### Add Special Value Types to a Class

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

Demonstrates how to extend a class definition in `classes.ts` to include additional value types, such as 'special' for specific behaviors like 'w-auto'.

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

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

### Define a new class in classes.ts

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

Illustrates the basic structure for adding a new utility class, such as 'w' (width), to the `classes.ts` object, specifying its initial value types. The key is the class name, and `valueTypes` is an array of supported value types.

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

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

### Add multiple value types to a class in classes.ts

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

Shows how to extend a class definition in `classes.ts` to support multiple value types, like 'udim' and 'special', indicating different parsing behaviors for the same class. This allows a class to produce various outcomes.

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

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

### Add Custom Value Type to Class Definition

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

Final step in integrating a custom value type, showing how to add it (e.g., 'border') to the `valueTypes` array of the corresponding class definition in `classes.ts`.

```ts
border: {
    valueTypes: ["color3", "border"]
},
```

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

### Specify special values for a class in classes.ts

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

Demonstrates how to include specific 'specialValues' within a class definition in `classes.ts` to handle predefined non-arbitrary values, such as 'w-auto'. These values are explicitly listed and processed differently from arbitrary value types.

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

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

### Define Type for Custom Value in types.ts

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

Shows how to create a TypeScript type alias (e.g., `BorderValueName`) in `types.ts` to represent the keys of a custom value type, ensuring type safety.

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

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

### Create a new custom value type file (e.g., border.ts)

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

Explains how to define a new custom value type by creating a dedicated TypeScript file (e.g., `border.ts`) in the `values` folder. This file exports an object mapping specific suffixes (like '0', 'px', '1') to their corresponding numerical values, useful for non-reusable types.

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

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

### Integrate new custom value type into values.ts

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

Shows how to import a newly created custom value type (e.g., `border`) and add it to the main `values` object in `values/values.ts`. This step makes the new value type globally available for use in class definitions and parsing logic.

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

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

### Define TypeScript type for new custom value type in types.ts

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

Illustrates how to create a TypeScript type alias in `types.ts` for the keys of a newly added custom value type. This ensures type safety, provides auto-completion, and improves code maintainability when referencing these values.

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

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

### Assign new custom value type to a class in classes.ts

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

Shows the final step of associating a newly defined custom value type (e.g., 'border') with a class (e.g., 'border') in `classes.ts`. This enables the class to utilize the custom parsing logic defined for the 'border' value type, alongside other types like 'color3'.

```ts
border: {
    valueTypes: ["color3", "border"]
},
```

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

### Initialize TailwindCSS Configuration

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

Initializes a `tailwind.config.js` file in your project root, which is necessary for Tailwind CSS configuration and editor autocomplete.

```bash
npx tailwindcss init
```

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

### Use RowindCSS Components in Roact

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

Demonstrates how to import and utilize RowindCSS components like Div, Button, and Text within a Roact functional component, applying various Tailwind CSS classes for styling and layout.

```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>
        )
    }
```

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

### Attach References to Rowind Components

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

Illustrates how to attach a Roact reference to any Rowind component using its `ref` property, allowing direct manipulation or access to the underlying Roblox instance.

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

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

### Configure TailwindCSS Content Paths

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

Configures the `tailwind.config.js` file to specify the paths where Tailwind CSS should scan for class names, ensuring proper compilation and autocomplete functionality.

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