An experimental React component library built with Tailwind CSS and TypeScript

Usage no npm install needed!

<script type="module">
  import abiserRailwind from 'https://cdn.skypack.dev/@abiser/railwind';



React components on rails

A React component library built on top of tailwind css using TypeScript.


The purpose of this library is to generate a core set of React components that are statically typed using tailwind configuration options.

What is the point?

A benefit of using tailwind css is that you don't write css, you select it from existing prebuilt classes. If these types are then mapped to TypeScript types and assigned to props we now can control the styling of components at the code level as the compiler will not allow for any props that do not exist in the generated types. We can then expose these types in a visual editor to streamline the ui workflow by presenting the options in the editor when building ui components.

May-19-2021 06-27-13

Using Railwind

Railwind should be imported into a project in order to generate a design system for a specific use case. Example: A ui library for a specific organization that is used in several applications where the styling and theme are consistent.

Editing railwind core components

  • Run yarn run build-watch

  • run the playground script to visually test changes

Using the playground

cd to playground directory, run yarn install and then run yarn run start to start up the example playground to test railwind components

Updating Railwind Options

Example: Adding a new color

  • Add new color to tailwind.config.js

  • Run yarn run scripts:generateTailwindTypes to generate updates types

  • Run yarn run build:railwind to generate new stylesheet

Build for deployment

  • Bump the version in package.json

  • Run yarn run build to build a production package

  • Run npm publish