epicmaxco/vuestic-admin

Mix of tailwind and bem

Open

#1,017 opened on Jan 24, 2024

View on GitHub
 (2 comments) (0 reactions) (0 assignees)Vue (10,951 stars) (1,801 forks)user submission
d1: super easygood first issuerefactoringv1: minor

Description

Right now we have some components that use bem, while majority of the application uses tailwind

I searched by "__" and this seems to be the list. Feel free to check other components.

We want to only use tailwind for vuestic-admin. So for all of these we need to replace bem implementation with tailwind classes (simplest way might be to use GPT to help with that).

image

Contributor guide

Tech stack
vuetailwindcss
Domain
frontend
Issue type
refactor
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Basic knowledge of VueBasic knowledge of Tailwind CSS
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
75
Research direction
First, search for components using BEM class names (indicated by ' ' or ' ') in the repository, likely under src/components. Use the list provided in the issue as a starting point. For each component, identify the current BEM classes and replace them with equivalent Tailwind utility classes. You can refer to existing Tailwind styled components in the codebase for consistency. Using an AI tool like GPT can help generate Tailwind class combinations. After changes, ensure the component renders correctly and matches the original layout.