Styleguide One

A styleguide driven approach to building a personalized css library using TailwindCSS and LivingCSS.

⚡️ WORK IN PROGRESS ⚡️

Configure your main variables in tailwind.js, modify the css files in css/ and generate your unified css library.

Example

See an example of styleguide output.

Usage

Installation

You should first make sure that yarn and gulp are globally installed on your system.

yarn install

Generation of the library

Define your constants (colors, fonts, spaces, etc...) in the tailwind.js file, following the tailwind configuration principles.

Then generate your library with:

# will generate your css library as `build/lib.css`
gulp css

Generation of the styleguide

You can modify the CSS comments in every css/*.css file, which will have an impact on the generated styleguide. Learn more about styleguide documentation

Then generate the stylguide with:

# you can then access your web styleguide at `docs/index.html`
gulp styleguide

Development mode

Any modification to a file in css/ or to the tailwind.js config file will regenerate your css library and update the styleguide.

gulp watch

Credits

• Github of TailwindCSS
• Github of LivingCSS

License

MIT