In previous post, we learned how to apply Tailwind CSS to Angular application. However, the Tailwind CSS does not render in Storybook components properly.
It is because we need to install PostCSS add-on to configure PostCSS and add Tailwind to the Storybook.
In this post, we learn how to install storybook PostCSS add-on and create a PostCSS configuration to add Tailwind to Storybook and render their CSS in Storybook components.
Precondition
Angular application must have Tailwind installed before we can proceed to render Tailwind CSS in Storybook.
Install Storybook PostCSS add-on
Storybook recommends to install addon-postcss to project. Let’s install @storybook/addon-postcss as development dependency of the project.
npm install -save-dev @storybook/addon-postcss
Within ./storybook/main.js, append "@storybook/addon-postcss" to addons array
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.
Final thought
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.
Tailwind CSS (https://tailwindcss.com/) is a utility-first CSS framework with out-of-the-box classes for UI components.
For example, <p class="pl-2">hello world</> is equivalent to <p style="padding-left: 0.5rem;">hello world</h> and we achieve the effect without writing inline-style or custom class.
However, our components may require one-off style that Tailwind does not support and we cannot justify to include it in theme configuration.
Fortunately, Tailwind enables Just-In-Time (JIT) mode that generates the styles on demand. This feature allows dynamic style such as “w-[200px]” to fix the width of a card to 200px.
This post will show you the installation of Tailwind CSS, enable Just-In-time mode and add dynamic styles to style a div element.
Install Tailwind CSS in Angular
Firstly, we have to install the dependency of tailwind and tailwind plugins into the Angular application.
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.
Final thought
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.