Adam Wathan, the creator of Tailwind CSS, talks about coupling in HTML and CSS, different styling approaches, messy templates, component classes in Tailwind, CSS patterns in SPA, experimental design tools, and the future of Tailwind.
Tailwind CSS provides more flexibility and control over CSS, replacing Bootstrap.
Functional CSS libraries like Tailwind offer faster development and enhance the reusability of components.
Tailwind CSS integrates well with different tools and frameworks, allowing for efficient development workflows.
Deep dives
The Evolution of Tailwind CSS
Tailwind CSS originally started as a set of styles created by the speaker. It was developed to replace Bootstrap and provide more flexibility and control over the CSS. The speaker wanted to keep using Less due to its features, such as being able to use classes as mixins. This approach eventually evolved into the concept of utility classes, which allowed for greater reusability and composition. The speaker also emphasized the importance of separating CSS and HTML concerns, and how this approach improves maintainability and efficiency.
The Benefits of Functional CSS
Functional CSS libraries, like Tailwind, offer numerous benefits. The use of utility classes allows for faster development and prototyping by providing a wide range of pre-defined styles that can be easily applied. The class-based approach also enhances the reusability of components and reduces the need for writing custom CSS. Changes to the design can be made directly in the HTML, reducing the code maintenance required. Additionally, functional CSS addresses the challenge of maintaining consistent styling across different components and pages, particularly when focusing on the space between components.
Tailwind CSS Integration and Workflow
Tailwind CSS integrates well with different tools and frameworks, allowing for efficient development workflows. For example, in Ember.js, there is a Tailwind integration add-on that simplifies the process of adding Tailwind CSS to the project. The speaker also mentioned the potential of design tools that embrace the HTML output and allow designers to work directly in code, providing more accurate and efficient design-to-development processes. The discussion explores the importance of balancing flexibility and standardization when working with Tailwind CSS and the potential of creating plugins to address specific needs and experimental features.
Use of CSS and utility classes in Tailwind
Tailwind CSS recommends using CSS and utility classes for creating custom component classes like buttons or pill knabs. The out-of-class feature allows mixing in utility classes to maintain consistency with the design system. While utility classes are preferred, sometimes custom CSS properties like box shadow may be necessary.
Tailwind's plugin system and flexibility
Tailwind introduced a plugin system, allowing developers to register new styles with Tailwind and generate them in JavaScript and CSS using the plugin. This enables the creation of reusable component libraries published on npm. Additionally, the use of JavaScript provides additional power, such as generating color scales or building column classes, instead of relying on complex sass using a programming language. Tailwind's pragmatism and flexibility have contributed to its success as a young project.
Adam joins Sam and Ryan to talk about coupling in HTML and CSS, different approaches to styling applications, and his popular open-source library Tailwind CSS.
