How to use AI to generate Tailwind CSS components

Overview of Tailwind CSS

Tailwind is a popular CSS library for building modern websites. It offers an alternate approach to traditional semantic class names and css-in-js style solutions. Because Tailwind encourages you to pick a utility class when writing CSS, the websites that use it tend to be more consistent looking. To show an example of how things go out of hand at scale, Github’s CSS (css stats) contains 105 unique background-colors, 38 unique border-colors, 35 unique border-radiuses, and 47 different font-sizes from 13 different font-families. Using mostly a limited set of utility classes has another important but less obvious benefit. When training LLMs this consistency results in more accurate code generation.

Generate without existing design or code

Sometimes you have a rough idea about what you want to build but don’t have a sketch or anything in hand. You may face a blank canvas problem or wish to speed things up. Using an LLM in this case is probably a good idea. While the exact prompt may take some time to formulate and may generate different outputs on different models, basic prompts overall perform pretty well. For example for the prompt Help me create a pricing component for a website. Use tailwind and html. Be concise. the following component was generated:

One downside of using this approach is that if you want to generate more sophisticated elements, like an admin panel, you’ll quickly run into context window problems. Another issue is that this type of generation will not create component-level abstractions for you. Often when working on a real-world project, you’ll have custom components as part of a page. Because the LLM doesn’t know about them or is not instructed to create them for you, this task is passed on to the user.

Generate from existing code or design

Generating components from existing materials such as other live websites is usually a better approach. If you’ve access to a multi-modal LLM such as GPT-4, you can share a screenshot with it and ask it to convert the screenshot to code. To demonstrate the capabilities let’s take the following pricing section as an example:

When uploaded a screenshot of this component, along with the prompt Can you write this component using HTML and Tailwind CSS?. It generates the following component.

While the structure of the data looks correct, the LLM seems to be having a hard time matching the styling of the component. Having worked with LLMs a lot we have witnessed this type of shortcomings in our daily workflows. This is why we’ve created Snap! Snap lets you capture elements from live websites without hallucinations or inaccuracies. See it in action:

Conclusion

Using AI to generate Tailwind CSS components can significantly speed up the development process and you should use it. However, it's important to remember that LLMs have their limitations, and manual adjustments are likely to be needed to achieve the desired results. As with any tool, it should be used as a helpful aid, not a complete replacement for a skilled developer.