Nullstack Tailwind

Setup

First, install the packages.

yarn add tailwindcss @tailwindcss/forms -D
yarn add nullstack-tailwind

Tailwind Config File

Configure the tailwind config to watch nullstack-tailwind components.

// tailwind.config.js
module.exports = {
  content: ["./node_modules/nullstack-tailwind/src/components/**/*.nts"],
  plugins: [require("@tailwindcss/forms")],
};

Tailwind CSS File

Create a tailwind.css file with the configuration below.

/* tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Import the generated CSS file

// Application.nts
import "./styles.css";

Script Examples

{
  "scripts": {
    "start-tailwind": "npx tailwindcss -i ./src/tailwind.css -o ./src/styles.css --watch",
    "build-tailwind": "npx tailwindcss -i ./src/tailwind.css -o ./src/styles.css"
  }
}

Running

Install the dependencies:

yarn install

Copy the environment sample to a .env file

NULLSTACK_PROJECT_NAME="[dev] Nullstack Tailwind"
NULLSTACK_PROJECT_DOMAIN="localhost"
NULLSTACK_PROJECT_COLOR="#D22365"
NULLSTACK_SERVER_PORT="3000"

Run the app in development mode:

npm start

Open http://localhost:3000 to view it in the browser.

API

Table of Contents

• Elements
  • Avatar
    • Parameters
    • Examples
  • Badge
    • Parameters
    • Examples
  • Button
    • Parameters
    • Examples
  • ButtonGroup
    • Parameters
    • Examples
• Feedbacks
  • Alert
    • Parameters
    • Examples
• Forms
  • Checkbox
    • Parameters
    • Examples
  • DatePicker
    • Parameters
    • Examples
  • Input
    • Parameters
    • Examples
  • Radio
    • Parameters
    • Examples
  • Select
    • Parameters
    • Examples
  • Textarea
    • Parameters
    • Examples
  • Toggle
    • Parameters
    • Examples
• Layouts
  • Panel
    • Parameters
    • Examples
• Lists
  • Table
    • Parameters
    • Examples

Elements

Avatar

src/components/elements/Avatar.nts:24-49

Parameters

• src string?
• alt string?
• placeholder string?
• id string?
• class string?

Examples

import { Avatar } from "nullstack-tailwind";

<Avatar class="h-10 w-10" src="https://avatars0.githubusercontent.com/u/1234?s=460&v=4" alt="Avatar" />

Returns Element

Badge

src/components/elements/Badge.nts:20-34

Parameters

• children !Element
• id string?
• class string?

Examples

import { Badge } from "nullstack-tailwind";

<Badge>Example</Badge>

Returns Element

Button

src/components/elements/Button.nts:24-40

Parameters

• children !Element
• onclick function?
• id string?
• class string?
• type string?

Examples

import { Button } from "nullstack-tailwind";

<Button onclick={() => alert("Hello")}>Hello</Button>

Returns Element

ButtonGroup

src/components/elements/ButtonGroup.nts:24-35

Parameters

• children !Element
• id string?
• class string?

Examples

import { ButtonGroup, Button } from "nullstack-tailwind";

<ButtonGroup>
 <Button class="rounded-r-none">Years</Button>
 <Button class="rounded-none">Months</Button>
 <Button class="rounded-l-none">Days</Button>
</ButtonGroup>

Returns Element

Feedbacks

Alert

src/components/feedbacks/Alert.nts:32-120

Parameters

• variant ("success" | "info" | "warning" | "danger")?
• icon SVGElement?
• class string?
• id string?
• children !Element

Examples

import { Alert } from "nullstack-tailwind";

<Alert variant="success" icon={<Icon name="check" />}>
 <h3 class="text-sm font-medium text-green-800">Success</h3>
 <div class="mt-2 text-sm text-green-700">
   <p>
     Lorem ipsum dolor sit amet consectetur adipisicing elit.
     Aliquid pariatur, ipsum similique veniam.
   </p>
 </div>
</Alert>

Returns Element

Forms

Checkbox

src/components/forms/Checkbox.nts:29-70

Parameters

• class string?
• description string?
• disabled boolean?
• id string?

Examples

import { Checkbox } from "nullstack-tailwind";

<Checkbox label="Comments" description="Get notified when someones posts a comment on a posting." bind={this.user.allowNotification} />

Returns Element

DatePicker

src/components/forms/DatePicker.nts:33-62

Parameters

• disabled boolean?
• children Element?
• config object? flatpickr config
• class string?
• helper string?
• id string?
• label string?

Examples

import { DatePicker } from "nullstack-tailwind";

<DatePicker label="Comments" config={{}} bind={this.user.createdAt} />

Returns Element

Input

src/components/forms/Input.nts:44-112

Parameters

• id string?
• class string?
• placeholder string?
• helper string?
• corner string?
• error string?
• type string?
• disabled boolean?

Examples

import { Input } from "nullstack-tailwind";

<Input
 label="Email"
 type="email"
 bind={this.user.email}
 error="Invalid e-mail"
 placeholder="foo@bar.com"
 helper="Example description"
 corner="Optional"
/>

Returns Element

Radio

src/components/forms/Radio.nts:28-75

Parameters

• label string?
• id string?
• class string?
• helper string?
• disabled boolean?

Examples

import { Radio } from "nullstack-tailwind";

<Radio label="Notifications" helper="Any description" bind={this.user.allowNotification} />

Returns Element

Select

src/components/forms/Select.nts:34-64

Parameters

• label string?
• helper string?
• id string?
• class string?
• children Element?
• disabled boolean?

Examples

import { Select } from "nullstack-tailwind";

<Select label="Country" helper="Select your country">
 <option value="">Select your country</option>
 <option value="US">United States</option>
 <option value="CA">Canada</option>
</Select>

Returns Element

Textarea

src/components/forms/Textarea.nts:28-61

Parameters

• rows number?
• label string?
• helper string?
• disabled boolean?

Examples

import { Textarea } from "nullstack-tailwind";

<Textarea label="Comments" rows={6} bind={this.user.about} />

Returns Element

Toggle

src/components/forms/Toggle.nts:26-60

Parameters

• label string?
• id string?
• class string?
• disabled boolean?

Examples

import { Toggle } from "nullstack-tailwind";

<Toggle label="Notifications" bind={this.user.allowNotification} />

Returns Element

Layouts

Panel

src/components/layouts/Panel.nts:22-35

Parameters

• id string?
• class string?
• title string?
• children Element?

Examples

import { Panel } from "nullstack-tailwind";

<Panel id="my-panel" class="bg-gray-100">Child elements here...</Panel>

Returns Element

Lists

Table

src/components/lists/Table.nts:37-46

Parameters

• id string?
• class string?
• children Element?

Examples

import { Table } from "nullstack-tailwind";

<Table>
 <Table.THead>
     <Table.TR>
     <Table.TH>Name</Table.TH>
     <Table.TH>Title</Table.TH>
     <Table.TH>Email</Table.TH>
     <Table.TH>Role</Table.TH>
     <Table.TH>Actions</Table.TH>
   </Table.TR>
 </Table.THead>
 <Table.TBody>
   <Table.TR>
     <Table.TD class="font-medium text-gray-900">
       Lindsay Walton
     </Table.TD>
     <Table.TD>Front-end Developer</Table.TD>
     <Table.TD>lindsay.walton@example.com</Table.TD>
     <Table.TD>Member</Table.TD>
     <Table.TD>
       <a href="#" class="text-indigo-600 hover:text-indigo-900">
         Edit
       </a>
     </Table.TD>
   </Table.TR>
 </Table.TBody>
</Table>

Returns Element