stailwind v0.0.5

Stailwind

Create components with tailwindcss easily and quickly :)

Inspired by styled-components.

Installation

Stailwind is available as an npm package.

npm:

npm i stailwind

Settings

1. Install vscode Tailwind CSS IntelliSense extension;
2. Add the code below to the vscode settings file at the root of your project (~/.vscode/settings.json):

{
  "tailwindCSS.experimental.classRegex": [
    "(?:stw|stailwind)(?:|<[^>]*>)(?:|\\([^)]*\\))(?:|<[^>]*>)`((?:\\$\\{[^}]*\\}|[^$`])*?)`",
    "css(?:|\\()[`'\"]([^`'\"]+)[`'\"](?:|\\))"
  ]
}

How to use stailwind / stw function

Creation:

import stw from "stailwind";
// or
// import { stailwind } from "stailwind";

const Button = stw("button")`
  border
  border-gray-400
  px-4
  py-2
  rounded-md
`();

const ButtonBlue = stw(Button)`
  bg-blue-500
  text-white
`();

const ButtonRed = stw(ButtonBlue)`
  bg-red-500
`();

Usage:

<>
  <Button>Button</Button>
  <ButtonBlue>Button Blue</ButtonBlue>
  <ButtonRed>Button Red</ButtonRed>
</>

Result:

Custom props

Stailwind supports custom properties in your component. Also you can filter custom properties to prevent them from being rendered in the DOM, avoiding console errors.

Creation:

const Btn = stw("button")<{
  color?: "primary" | "secondary";
}>`
  px-4
  py-2
  rounded-md
  text-white
  ${({ color }) => (color === "secondary" ? "bg-red-500" : "bg-blue-500")}
`(({ color, ...props }) => props); // filtering custom props

Usage:

<>
  <Btn>Primary</Btn>
  <Btn color="secondary">Secondary</Btn>
</>

Result:

How to use css function

Creation:

import stw, { css } from "stailwind";

const commonStyles = css`
  px-6
  py-2.5
  rounded-3xl
  text-white
`;
// or
// css('...')
// css("...")
// css(`...`)

const MaterialBtn = stw('button')<{
  variation: 'elevated' | 'outlined' | 'icon';
}>`
  font-medium
  h-10
  text-sm
  
  ${({ variation }) =>
    ({
      elevated: css`
        ${commonStyles}
        bg-blue-500
        shadow
        shadow-gray-500
      `,
      outlined: css`
        ${commonStyles}
        bg-red-500
        border
        border-black
      `,
      icon: css`
        bg-green-500
        p-2
        rounded-full
        w-10
      `
    }[variation])}
`(({ variation, ...props }) => props);

Usage:

<>
  <MaterialBtn variation="elevated">Elevated</MaterialBtn>
  <MaterialBtn variation="outlined">Outlined</MaterialBtn>
  <MaterialBtn variation="icon">X</MaterialBtn>
</>

Result:

License

This project is licensed under the terms of the MIT license.