CSS

How to render Tailwind CSS in Angular and Storybook

by

Loading

Reading Time: 2 minutesIntroduction 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 … Read more

Tailwind CSS in JIT mode with Angular

by

Loading

Reading Time: 3 minutesIntroduction 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 … Read more

Use CSS to draw diagonal line across of square

by

Loading

Reading Time: < 1 minuteCreate two divs and convert them into flexboxes. 2. Add .left-diag:after pseudo element to draw a black dialog line that draws from bottom left to upper right. Sass style is shown below: 3. Add .right-diag:after pseudo element to draw a black dialog line that draws from bottom right to upper left. Sass style is shown … Read more