In this section, we will create a user profile settings design using Tailwind CSS. This process will... Tagged with html, tailwindcss, css, webdev.

QuizAPI

Community Picks is a section on daily.dev where our community members share the most interesting and valuable content they've discovered online. From insightful articles to handy tools, every post is a gem curated by our dedicated coomunity. To contribute to Community Picks, you need to have at least 250 reputation points, ensuring that only active and trusted members can share their finds.

Community Picks

Learn how to design a user profile settings interface using Tailwind CSS. The guide includes creating minimalist and enhanced profile settings, along with a responsive profile settings page featuring a sidebar. Focus is on using Tailwind CSS's utility-first approach to style various components for a visually appealing and user-friendly interface.

Creating a Responsive Profile Settings UI with Tailwind CSS

I want to open a discussion about tailwind. I don’t get to understand why some frontenders think this is a good idea. I don’t mean to bash but as a genuine question.
Tailwind Arguments that using this approach will have The following benefits:
<ul>
<li>easy to maintain</li>
<li>be confident at changing something.</li>
<li>having a Design System.</li>
</ul>
But al these arguments don’t stand when you consider something like scopes css or css-in-JavaScript. And those benefits are Symptoms of Bad Code bases.
Some downsides for using tailwind:
<ul>
<li>Need to learn fancy classnames instead of wrighting css right away.</li>
<li>Hard to read your html</li>
<li>Hard to find en specific element with it’s Styling because there is no classname</li>
<li>tailwind does Not Support specific Styling like padding-block.</li>
<li>Not reusable (and please don’t use @apply)</li>
<li>you have a extra tool to maintain.</li>
</ul>
The only thing that it actually solves is that it minimizes the css build. But those extra bites don’t make that much of a Difference in performance.