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

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

yarn install

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

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

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