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:

• TailwindCSS - a CSS utility library to build your theme
• postcss-import - enables CSS imports
• postcss-preset-env - CSS feature support and cross-browser compatibility
• postcss-nested - for sass-like nesting syntax
• postcss-purgecss - reduces file size by removing unused CSS selectors (production only)

Getting Started

Get started in 3 steps:

1. Install Storytails

$ ember install ember-storytails

2. Include Tailwind styles in app.css

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

3. 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.