chore: adding tailwind eslint plugin #34211
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
georgewrmarshall
added
the
team-design-system
Contributor
|
CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes. |
Contributor
There was a problem hiding this comment.
Pull Request Overview
This PR integrates the eslint-plugin-tailwindcss into the codebase and applies automatic fixes to existing components to enforce Tailwind CSS best practices.
- Installed the Tailwind CSS ESLint plugin and its TypeScript definitions.
- Updated ESLint configuration to enable Tailwind rules (ordering, shorthand enforcement, no contradicting classes, etc.).
- Refactored several
classNameattributes in the design system stories to use shorthand classes (e.g.,p-4,border-muted, reordering for consistency).
Reviewed Changes
Copilot reviewed 3 out of 4 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| ui/pages/design-system/design-system.stories.tsx | Converted multiple px-4 py-4 patterns to p-4, replaced custom border-color classes, and reordered classes for consistency. |
| package.json | Added eslint-plugin-tailwindcss and @types/eslint-plugin-tailwindcss to dependencies. |
| .eslintrc.js | Added tailwindcss to the ESLint plugins array, enabled its rules, and configured plugin settings. |
Comments suppressed due to low confidence (1)
.eslintrc.js:366
- [nitpick] Consider updating your contributor documentation (e.g., CONTRIBUTING.md or README) to mention the new Tailwind CSS ESLint plugin and its rules so that all contributors are aware of the enforced class ordering and shorthand conventions.
plugins: ['react', 'tailwindcss'],
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
georgewrmarshall
force-pushed
the
tailwind-eslint-plugin
branch
from
402724b to
5acaba2
Compare
Collaborator
Builds ready [5acaba2]
UI Startup Metrics (1237 ± 66 ms)
Benchmark value 17 exceeds gate value 15 for chrome browserify home mean getState Benchmark value 5 exceeds gate value 1 for chrome browserify home mean initialActions Benchmark value 1367 exceeds gate value 1365 for chrome browserify home p95 uiStartup Benchmark value 35 exceeds gate value 33 for chrome browserify home p95 getState Benchmark value 16 exceeds gate value 1.2 for chrome browserify home p95 initialActions Benchmark value 2243 exceeds gate value 2192 for chrome webpack home mean uiStartup Benchmark value 257 exceeds gate value 235 for chrome webpack home mean firstReactRender Benchmark value 9 exceeds gate value 7 for chrome webpack home mean initialActions Benchmark value 2661 exceeds gate value 2454 for chrome webpack home p95 uiStartup Benchmark value 64 exceeds gate value 57 for chrome webpack home p95 domInteractive Benchmark value 400 exceeds gate value 370 for chrome webpack home p95 firstReactRender Benchmark value 28 exceeds gate value 7 for chrome webpack home p95 initialActions Benchmark value 13 exceeds gate value 11 for firefox browserify home mean getState Benchmark value 5 exceeds gate value 1 for firefox browserify home mean initialActions Benchmark value 16 exceeds gate value 9 for firefox browserify home mean setupStore Benchmark value 1695 exceeds gate value 1660 for firefox browserify home p95 uiStartup Benchmark value 287 exceeds gate value 195 for firefox browserify home p95 domInteractive Benchmark value 31 exceeds gate value 24 for firefox browserify home p95 getState Benchmark value 19 exceeds gate value 2 for firefox browserify home p95 initialActions Benchmark value 68 exceeds gate value 27 for firefox browserify home p95 setupStore Benchmark value 1793 exceeds gate value 1615 for firefox webpack home mean uiStartup Benchmark value 1504 exceeds gate value 1380 for firefox webpack home mean load Benchmark value 1504 exceeds gate value 1380 for firefox webpack home mean domContentLoaded Benchmark value 109 exceeds gate value 100 for firefox webpack home mean domInteractive Benchmark value 60 exceeds gate value 38 for firefox webpack home mean firstReactRender Benchmark value 18 exceeds gate value 15 for firefox webpack home mean getState Benchmark value 10 exceeds gate value 1 for firefox webpack home mean initialActions Benchmark value 1483 exceeds gate value 1360 for firefox webpack home mean loadScripts Benchmark value 16 exceeds gate value 13 for firefox webpack home mean setupStore Benchmark value 2346 exceeds gate value 1935 for firefox webpack home p95 uiStartup Benchmark value 1884 exceeds gate value 1660 for firefox webpack home p95 load Benchmark value 1883 exceeds gate value 1660 for firefox webpack home p95 domContentLoaded Benchmark value 317 exceeds gate value 156 for firefox webpack home p95 domInteractive Benchmark value 71 exceeds gate value 50 for firefox webpack home p95 firstReactRender Benchmark value 35 exceeds gate value 32 for firefox webpack home p95 getState Benchmark value 22 exceeds gate value 2 for firefox webpack home p95 initialActions Benchmark value 1860 exceeds gate value 1630 for firefox webpack home p95 loadScripts Benchmark value 37 exceeds gate value 28 for firefox webpack home p95 setupStore Sum of mean exceeds: 693ms | Sum of p95 exceeds: 1777.8ms Sum of all benchmark exceeds: 2470.8ms Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
Collaborator
Builds ready [1bc1b6d]
UI Startup Metrics (1234 ± 66 ms)
Benchmark value 256 exceeds gate value 10 for chrome browserify home mean backgroundConnect Benchmark value 3 exceeds gate value 1 for chrome browserify home mean initialActions Benchmark value 270 exceeds gate value 18 for chrome browserify home p95 backgroundConnect Benchmark value 11 exceeds gate value 1.2 for chrome browserify home p95 initialActions Benchmark value 2262 exceeds gate value 2192 for chrome webpack home mean uiStartup Benchmark value 249 exceeds gate value 235 for chrome webpack home mean firstReactRender Benchmark value 10 exceeds gate value 7 for chrome webpack home mean initialActions Benchmark value 2663 exceeds gate value 2454 for chrome webpack home p95 uiStartup Benchmark value 64 exceeds gate value 57 for chrome webpack home p95 domInteractive Benchmark value 399 exceeds gate value 370 for chrome webpack home p95 firstReactRender Benchmark value 28 exceeds gate value 7 for chrome webpack home p95 initialActions Benchmark value 1985 exceeds gate value 1970 for chrome webpack home p95 loadScripts Benchmark value 1452 exceeds gate value 1405 for firefox browserify home mean uiStartup Benchmark value 1259 exceeds gate value 1245 for firefox browserify home mean load Benchmark value 1258 exceeds gate value 1239 for firefox browserify home mean domContentLoaded Benchmark value 124 exceeds gate value 110 for firefox browserify home mean domInteractive Benchmark value 28 exceeds gate value 25 for firefox browserify home mean backgroundConnect Benchmark value 12 exceeds gate value 11 for firefox browserify home mean getState Benchmark value 5 exceeds gate value 1 for firefox browserify home mean initialActions Benchmark value 1236 exceeds gate value 1230 for firefox browserify home mean loadScripts Benchmark value 10 exceeds gate value 9 for firefox browserify home mean setupStore Benchmark value 1792 exceeds gate value 1660 for firefox browserify home p95 uiStartup Benchmark value 339 exceeds gate value 195 for firefox browserify home p95 domInteractive Benchmark value 64 exceeds gate value 24 for firefox browserify home p95 getState Benchmark value 11 exceeds gate value 2 for firefox browserify home p95 initialActions Benchmark value 36 exceeds gate value 27 for firefox browserify home p95 setupStore Benchmark value 1752 exceeds gate value 1615 for firefox webpack home mean uiStartup Benchmark value 1475 exceeds gate value 1380 for firefox webpack home mean load Benchmark value 1475 exceeds gate value 1380 for firefox webpack home mean domContentLoaded Benchmark value 108 exceeds gate value 100 for firefox webpack home mean domInteractive Benchmark value 28 exceeds gate value 26 for firefox webpack home mean backgroundConnect Benchmark value 58 exceeds gate value 38 for firefox webpack home mean firstReactRender Benchmark value 6 exceeds gate value 1 for firefox webpack home mean initialActions Benchmark value 1453 exceeds gate value 1360 for firefox webpack home mean loadScripts Benchmark value 15 exceeds gate value 13 for firefox webpack home mean setupStore Benchmark value 2208 exceeds gate value 1935 for firefox webpack home p95 uiStartup Benchmark value 1832 exceeds gate value 1660 for firefox webpack home p95 load Benchmark value 1831 exceeds gate value 1660 for firefox webpack home p95 domContentLoaded Benchmark value 288 exceeds gate value 156 for firefox webpack home p95 domInteractive Benchmark value 66 exceeds gate value 50 for firefox webpack home p95 firstReactRender Benchmark value 21 exceeds gate value 2 for firefox webpack home p95 initialActions Benchmark value 1807 exceeds gate value 1630 for firefox webpack home p95 loadScripts Benchmark value 35 exceeds gate value 28 for firefox webpack home p95 setupStore Sum of mean exceeds: 902ms | Sum of p95 exceeds: 1843.8ms Sum of all benchmark exceeds: 2745.8ms Bundle size diffs [🚀 Bundle size reduced!]
|
Collaborator
Builds ready [b263d3e]
UI Startup Metrics (1284 ± 53 ms)
Benchmark value 1098 exceeds gate value 1070 for chrome browserify home mean load Benchmark value 1092 exceeds gate value 1061 for chrome browserify home mean domContentLoaded Benchmark value 217 exceeds gate value 10 for chrome browserify home mean backgroundConnect Benchmark value 4 exceeds gate value 1 for chrome browserify home mean initialActions Benchmark value 882 exceeds gate value 830 for chrome browserify home mean loadScripts Benchmark value 231 exceeds gate value 18 for chrome browserify home p95 backgroundConnect Benchmark value 17 exceeds gate value 1.2 for chrome browserify home p95 initialActions Benchmark value 963 exceeds gate value 940 for chrome browserify home p95 loadScripts Benchmark value 2397 exceeds gate value 2192 for chrome webpack home mean uiStartup Benchmark value 1885 exceeds gate value 1711 for chrome webpack home mean load Benchmark value 1875 exceeds gate value 1704 for chrome webpack home mean domContentLoaded Benchmark value 22 exceeds gate value 21 for chrome webpack home mean domInteractive Benchmark value 57 exceeds gate value 40 for chrome webpack home mean backgroundConnect Benchmark value 31 exceeds gate value 29 for chrome webpack home mean getState Benchmark value 8 exceeds gate value 7 for chrome webpack home mean initialActions Benchmark value 1868 exceeds gate value 1699 for chrome webpack home mean loadScripts Benchmark value 2758 exceeds gate value 2454 for chrome webpack home p95 uiStartup Benchmark value 2196 exceeds gate value 2030 for chrome webpack home p95 load Benchmark value 2162 exceeds gate value 2005 for chrome webpack home p95 domContentLoaded Benchmark value 59 exceeds gate value 57 for chrome webpack home p95 domInteractive Benchmark value 287 exceeds gate value 90 for chrome webpack home p95 backgroundConnect Benchmark value 253 exceeds gate value 195 for chrome webpack home p95 getState Benchmark value 15 exceeds gate value 7 for chrome webpack home p95 initialActions Benchmark value 2160 exceeds gate value 1970 for chrome webpack home p95 loadScripts Benchmark value 1506 exceeds gate value 1405 for firefox browserify home mean uiStartup Benchmark value 1302 exceeds gate value 1245 for firefox browserify home mean load Benchmark value 1302 exceeds gate value 1239 for firefox browserify home mean domContentLoaded Benchmark value 114 exceeds gate value 110 for firefox browserify home mean domInteractive Benchmark value 30 exceeds gate value 25 for firefox browserify home mean backgroundConnect Benchmark value 28 exceeds gate value 25 for firefox browserify home mean firstReactRender Benchmark value 12 exceeds gate value 11 for firefox browserify home mean getState Benchmark value 5 exceeds gate value 1 for firefox browserify home mean initialActions Benchmark value 1279 exceeds gate value 1230 for firefox browserify home mean loadScripts Benchmark value 12 exceeds gate value 9 for firefox browserify home mean setupStore Benchmark value 1873 exceeds gate value 1660 for firefox browserify home p95 uiStartup Benchmark value 283 exceeds gate value 195 for firefox browserify home p95 domInteractive Benchmark value 37 exceeds gate value 24 for firefox browserify home p95 getState Benchmark value 17 exceeds gate value 2 for firefox browserify home p95 initialActions Benchmark value 28 exceeds gate value 27 for firefox browserify home p95 setupStore Benchmark value 1814 exceeds gate value 1615 for firefox webpack home mean uiStartup Benchmark value 1517 exceeds gate value 1380 for firefox webpack home mean load Benchmark value 1516 exceeds gate value 1380 for firefox webpack home mean domContentLoaded Benchmark value 101 exceeds gate value 100 for firefox webpack home mean domInteractive Benchmark value 34 exceeds gate value 26 for firefox webpack home mean backgroundConnect Benchmark value 55 exceeds gate value 38 for firefox webpack home mean firstReactRender Benchmark value 11 exceeds gate value 1 for firefox webpack home mean initialActions Benchmark value 1491 exceeds gate value 1360 for firefox webpack home mean loadScripts Benchmark value 16 exceeds gate value 13 for firefox webpack home mean setupStore Benchmark value 2187 exceeds gate value 1935 for firefox webpack home p95 uiStartup Benchmark value 1796 exceeds gate value 1660 for firefox webpack home p95 load Benchmark value 1796 exceeds gate value 1660 for firefox webpack home p95 domContentLoaded Benchmark value 341 exceeds gate value 156 for firefox webpack home p95 domInteractive Benchmark value 54 exceeds gate value 49 for firefox webpack home p95 backgroundConnect Benchmark value 68 exceeds gate value 50 for firefox webpack home p95 firstReactRender Benchmark value 38 exceeds gate value 32 for firefox webpack home p95 getState Benchmark value 26 exceeds gate value 2 for firefox webpack home p95 initialActions Benchmark value 1770 exceeds gate value 1630 for firefox webpack home p95 loadScripts Benchmark value 35 exceeds gate value 28 for firefox webpack home p95 setupStore Sum of mean exceeds: 2044ms | Sum of p95 exceeds: 2572.8ms Sum of all benchmark exceeds: 4616.8ms Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
| {/* Container Expanded View */} | ||
| <Box className="mx-auto w-full bg-default md:max-w-xl md:rounded-3xl md:py-4"> | ||
| {/* Header */} | ||
| <Box className="border-color-border-muted px-4 py-4 md:px-8"> |
Contributor
Author
There was a problem hiding this comment.
Lint fixes
brianacnguyen
approved these changes
Jul 22, 2025
HowardBraham
approved these changes
Jul 22, 2025
metamaskbot
added
the
release-13.1.0
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
This PR adds the ESLint Tailwind CSS plugin to enforce the Tailwind CSS best practices and some of the guidelines established in the MetaMask contributor docs. The plugin provides automated linting to ensure consistent usage of Tailwind CSS classes across the MetaMask Extension codebase.
Key changes:
eslint-plugin-tailwindcssand its TypeScript definitionsp-4instead ofpx-4 py-4)This change supports the broader design system unification effort by ensuring consistent Tailwind CSS usage across all MetaMask applications, improving code maintainability and reducing styling inconsistencies.
Changelog
CHANGELOG entry: null
Related issues
Fixes: #34210
Manual testing steps
yarn installyarn lintyarn storybookScreenshots/Recordings
Before
before.eslint.mov
After
px-4 py-4→p-4, proper class ordering)tailwind.eslint.720.mov
Pre-merge author checklist
Pre-merge reviewer checklist