I've been exploring using Stencil with Tailwind CSS and this is an attempt to document the different approaches to getting this to work...
I've tried 3 approaches to integrating Tailwind into Stencil:
proto-stencil-tailwindstencil-tailwind-plugin
| I started with a set of mocks for a dashboard style UI in Zeplin and in 3 weeks I was able to convert that to a working page in our production application. The application supported search & pagination, along with detail expansions for items. There were high level kpi's which were always visible and then the details typically included a number of kpi charts and displays. The breakdown of the development work went roughly as follows; | |
| 2 weeks - create React components for UI with JSON data and simple state handling | |
| 1 week - convert to Redux, make real API calls, tweak composition layers | |
| While i can't show any of the mocks or screenshots yet, it looks amazing. Some of the packages used include; | |
| React.js | |
| Redux.js | |
| Moment.js |
| { | |
| "always_show_minimap_viewport": true, | |
| "bold_folder_labels": true, | |
| "caret_extra_bottom": 2, | |
| "caret_extra_top": 2, | |
| "caret_extra_width": 3, | |
| "caret_style": "phase", | |
| "color_scheme": "Packages/Colorsublime-Themes/TronLegacy2.tmTheme", | |
| "draw_minimap_border": true, | |
| "fade_fold_buttons": false, |
| <?xml version="1.0" encoding="UTF-8"?> | |
| <!DOCTYPE plist PUBLIC "-//Apple Computer//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd"> | |
| <!-- | |
| ====================================================================== | |
| Tron | |
| ====================================================================== | |
| A Sublime Text 2 / Textmate theme. | |
| Copyright (c) 2012 Dayle Rees. | |
| Released under the MIT License <http://opensource.org/licenses/MIT> | |
| ====================================================================== |
I hereby claim:
To claim this, I am signing this object: