ember-storytails

0.6.3 • Public • Published

ember-storytails

Build themed web apps with Storybook + TailwindCSS.

This addon configures a PostCSS pipeline for your app with smart defaults, including TailwindCSS for its powerful utilities and theming.

The PostCSS pipeline is provided by ember-cli-postcss and includes:

Getting Started

Get started in 3 steps:

  1. Install Storytails
$ ember install ember-storytails
  1. Include Tailwind styles in app.css
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
  1. Start theming!

Run live reload server running alongside of Storybook:

$ ember serve --live-reload # shorthand: ember s -lr
$ ember storybook # shorthand: ember sb

Note: When you first run Storybook, it will ask you to generate a preview-head file that's used by Storybook to run the Ember app. Without it, Storybook will not run.

Add stories to the stories/ directory in your app's root. Use the ember g story <story-name> command for a quickstart. Modify the Tailwind config in config/tailwind/

Compatibility

  • Ember.js v3.4 or above
  • Ember CLI v2.13 or above
  • Node.js v8 or above

Contributing

See the Contributing guide for details.

Credits

Inspired by the late ember-cli-tailwind. Based off the guide provided by chrism for emberjs-tailwind-purgecss.

License

This project is licensed under the MIT License.

Package Sidebar

Install

npm i ember-storytails

Weekly Downloads

7

Version

0.6.3

License

MIT

Unpacked Size

628 kB

Total Files

28

Last publish

Collaborators

  • egaba