indicates PostCSS is loaded to Storybook successfully
Open the storybooks of FoodCard Component
Storybook components render Tailwind CSS property after the configuration
We can use Storybook to visualize the functionality and styling of components.
When Storybook components broke and did not render Tailwind CSS, I panicked because I was not sure how to support Tailwind in them. Storybook PostCSS add-on simplifies the configuration and with a few steps, Storybook renders the components with the expected styling.
This is the end of the blog post and I hope you like the content and continue to follow my learning experience in Angular and Storybook.
Then, we add file path in content array to purge all html and typescript files to maintain small bundle size in production. The last step of configuration is to import typography and forms plugins by require('@tailwindcss/typography') and require('@tailwindcss/forms')
Add Tailwind Base Styles to Angular
It is important to put tailwind directives at the beginning of the global stylesheet, style.scss. These are base styles that are accessible to all UI components of the application.
Except width: 300px;, we can substitute the rest with tailwind utility classes.
I don’t believe the width style should be part of the configuration because it is used one time. The just-in-time mode provides the solution we need; w-[300px] generates custom class at run time and changes the width to 300 pixels wide.
The final stage is to verify the custom style actually works and the div component has the expected width.
We can open Chrome inspector, hover on the <div> element and inspect its width property. As the image indicates, we have successfully fix the width to 300 pixels.
I really like to use Tailwind in Angular because it saves the efforts of authoring custom css classes in SCSS files. After switching to tailwind, I got rid of most of the SCSS files and replaced the styles with the counterpart utility classes. When utility class is unavailable, it is convenient to generate the custom class on the fly with arbitrary value. Authoring UI components can’t get any easier in web development.
This is the end of the blog post and I hope you like the content and continue to follow my learning experience in Angular and other web technologies.