Migrate away from CSS files to Tailwind

• Include screenshots of every usage.
• Self-review all code!
• Mobile and desktop, light and dark mode
• Make your PRs easy to read, well-written English, etc – do NOT use AI for the PR description.
• Use the classnames helper: import classNames from "$app/utils/classNames";
• Simplify and improve the CSS, using built-in Tailwind values wherever possible - don't just copy the calculations and complexity from the CSS files!

[!NOTE] Please run the following AI prompt against your changes to ensure your migration follows TailwindCSS' best practices and our guidelines.

Bounty: $1.5K per file

Make sure to include before/after for mobile/desktop and dark/light mode for each change. Use components if they make sense.

Nicely formatted PRs (see core members' PRs for examples) that are fun to read and code that's easy to read will be merged first/only.

• [ ] _alert.scss
• [x] _application.scss
• [x] _aside.scss
• [x] _audio.scss
• [ ] _button.scss
• [x] _calendar.scss
• [x] _card.scss
• [x] _carousel.scss
• [x] _cart.scss
• [x] _chart.scss
• _colors.scss - Skip for now. Can be deleted right at the end, there's nothing to create in Tailwind.
• [x] _comment.scss
• [x] _containers.scss
• [x] _custom_sections.scss
• [ ] _definitions.scss
• [x] _discover.scss
• [ ] _dropdown.scss - Bounty: $2K
• [ ] _email.scss
• [x] _figure.scss
• _font.scss - Skip for now. Will likely remain as a CSS file imported from the likely-separate Tailwind configs for the website, emails, and embeds.
• [ ] _forms.scss - Bounty: $2K
• [ ] _global.scss
• [x] _grid.scss and override class
• [x] _histogram.scss
• [ ] _icons.scss
• [x] _image_uploader.scss - https://github.com/antiwork/gumroad/pull/1411 by @kr-sushil
• [ ] _legacy.scss
• [x] _modal.scss
• [x] _nav.scss
• [x] _nested_menu.scss
• [x] _onboarding.scss
• [x] _pagination.scss
• [x] _pill.scss
• [x] _placeholder.scss
• [x] _price.scss
• [x] _product.scss
• [x] _product_content.scss
• [x] _profile.scss
• [x] _progress.scss
• [x] _ratings.scss
• [ ] _rich_text.scss
• [x] _rows.scss
• [x] _separator.scss
• [x] _sidebar.scss
• [ ] _stack.scss
• [x] _stats.scss
• [x] _subscribe_preview.scss
• [x] _table.scss
• [x] _tabs.scss
• [x] _tooltip.scss
• [x] _widget.scss

@slavingia will this issue be handled internally, or are you open for outside contributions?

Open to contributions! Might be a bit harder to contribute early on since Tailwind config etc will need adjustments and there'll be fewer examples to work from, but you're welcome to try, and it'll gradually get easier as more PRs are merged

We should upgrade to Tailwind 4 before we go too much further

@slavingia, I'd like to suggest a way to avoid duplication of Tailwind classes. What do you think about extracting to design system components? That would be better than repeating ourselves over and over in many places! Imagine we want to adjust the rating component. For example, with the current approach of people repeating classes, we will have to remember to fix it in many parts, or we will end up with a consistent UI.

Thanks

@slavingia, I'd like to suggest a way to avoid duplication of Tailwind classes. What do you think about extracting to design system components? That would be better than repeating ourselves over and over in many places! Imagine we want to adjust the rating component. For example, with the current approach of people repeating classes, we will have to remember to fix it in many parts, or we will end up with a consistent UI.

Thanks

Of course.

To add to that, it's what we're starting to do already with the components/ui directory - we should absolutely add to that as we migrate more components

It'll be $100 per this week, $250 per next week, $1K per the week after that, $2.5K the week after that, etc. This should make it so that the easiest/quickest ones get tackled first, and the migration should complete by the end of October latest.

Make sure to include before/after for mobile/desktop and dark/light mode for each change. Use components if they make sense.

Nicely formatted PRs (see core members' PRs for examples) that are fun to read and code that's easy to read will be merged first/only.

Hello @slavingia , I'm interested in contributing to the Tailwind CSS migration (#1055) and would like to claim a file or component to start. Could you clarify your preferred workflow for evaluation, estimated delivery time for PRs, and the process for bounty claiming ? I'll follow your formatting and testing requirements and share screenshots for desktop/mobile and light/dark modes in my PRs. Please let me know if there's a specific area you want prioritized or any additional instructions before I begin.

Thanks!

Contributing.md covers it all.

Also to be overly clear the bounties are for each CSS file deleted - inline migrations are appreciated but don’t qualify for any bounty.

@slavingia Haven't seen this brought up yet - how do you wanna handle it when CSS classes are used in ERB code (seeing that pretty frequently in admin)? Do you think it's worth migrating them to React as a part of the relevant tasks?

@MayaRainer the admin is out of scope for the time being, we're currently moving it to React in another branch. We'll cleanup the CSS there afterwards so we can avoid conflicts.

@EmCousin My point is that admin uses a lot of the CSS files as well, so we can't just remove them without breaking it, but we also can't use our React/Tailwind components there as it doesn't (fully) use React yet, so the options would be to either migrate it to React as a part of this or duplicate a lot of work into ERB legacy code. Lmk if I'm missing something.

^ Was thinking the same thing. Is there an admin issue we can chip in on? Seems like it should be possible to migrate page by page in parallel

I think we can use rails partial with content and capture. Something like:

<%# partial %>
<% classes = ["btn", local_assigns[:variant] || "btn-default"] %>
<button class="<%= classes.join(" ") %>">
  <%= capture(&block) if block_given? %>
</button>

<%# usage %>
<%= render "shared/button", variant: "btn-primary" do %>
  Some content
<% end %>

But the question is, does it worth the effort knowing that we are migrating them anyway to react?

Another option is to keep SCSS files and classes only for admin view and replace them with the DS react component once the migration to react is done.

Chatted about this on Slack with @EmCousin and he mentioned he's been working on the migration in #1057, and is close to done. Probably best to focus on the CSS files not used by admin for now so we don't end up duplicating work.

What is the bounty payout process for this task? I got PR merged but didn’t get any further instructions. My email [email protected] Merged PR: https://github.com/antiwork/gumroad/pull/1636

Updated bounty to $1k - but we expect greatness!

Added an AI prompt that contributors can execute against their change to help them push better quality PRs.

Increased bounty per PR to $1k, so about $30k in available bounties. Will keep it at $1K a full week after the admin SPA is merged as that will block a lot of these from being tackled.

(if someone has done the work to figure out which ones are not dependent on admin, lmk and we can update the core list)

@slavingia Do you have a plan/preference for how to handle icons? Currently we use our own custom icon set defined in SCSS (see here, here, and here). Do you wanna switch to another icon set as a part of this or just skip icons for now?

@slavingia Do you have a plan/preference for how to handle icons? Currently we use our own custom icon set defined in SCSS (see here, here, and here). Do you wanna switch to another icon set as a part of this or just skip icons for now?

Switch to Lucide react or another library so we can remove that from our shipping workflow would be great. The designers can pick based on what matches the gumroad aesthetic.

@slavingia, _price.scs is also done.

Thanks

Admin SPA is effectively done, we can continue with the rest of these! Starting on tables

Working on tabs

@slavingia What's the bounty for the remaining items currently?

Currently $1k each

@ershad are you still accepting prs for this