chore: Implement Tailwind CSS (WIP) #30170

georgewrmarshall · 2025-02-06T18:37:04Z

Description

This PR demonstrates a proof of concept implementation of Tailwind CSS in the MetaMask Extension. The implementation aims to modernize our styling approach and improve developer experience by:

Integrating Tailwind CSS configuration and dependencies
Setting up the necessary build pipeline changes
Demonstrating practical usage in component stories
Providing a foundation for the proposed ADR (MetaMask/decisions#44)

The changes include:

Adding Tailwind CSS and related dependencies
Configuring PostCSS for Tailwind processing
Updating build configurations
Demonstrating utility class usage in Box component stories
Setting up design system token integration

Slack post

Related issues

Fixes: https://github.com/MetaMask/MetaMask-planning/issues/3851

Manual testing steps

Pull branch and install dependencies
Run Storybook (yarn storybook)
Navigate to Box component stories
Verify Tailwind utility classes are working in the demo story
Verify build process completes successfully

Screenshots/Recordings

Before

TBC

After

TBC

Pre-merge author checklist

I've followed MetaMask Contributor Docs and MetaMask Extension Coding Standards
I've completed the PR template to the best of my ability
I've included examples demonstrating the implementation
I've documented configuration changes and setup requirements
I've applied the appropriate labels (POC, enhancement, build)

Pre-merge reviewer checklist

I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed)
I confirm that this PR demonstrates a working proof of concept for Tailwind CSS implementation as described in the related ADR and planning issue

github-actions · 2025-02-06T18:37:17Z

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.

socket-security · 2025-02-06T18:38:28Z

New and updated dependencies detected. Learn more about Socket for GitHub ↗︎

Package	New capabilities	Transitives	Size	Publisher
npm/@alloc/[email protected]	None	`0`	14.1 kB	aleclarson
npm/@jridgewell/[email protected] 🔁 npm/@jridgewell/[email protected]	None	`0`	81.6 kB	jridgewell
npm/@metamask/[email protected]	None	`0`	0 B
npm/[email protected]	None	`0`	13.7 kB	leerobinson
npm/[email protected] 🔁 npm/[email protected]	None	`0`	44.6 kB	jonschlinkert
npm/[email protected]	None	`0`	4.05 kB	stevenvachon
npm/[email protected]	None	`0`	17.3 kB	dcporter
npm/[email protected] 🔁 npm/[email protected]	None	`0`	16.7 kB	jonschlinkert
npm/[email protected] 🔁 npm/[email protected]	None	`0`	2 MB	pi0
npm/[email protected] 🔁 npm/[email protected]	None	`0`	56.6 kB	doowb
npm/[email protected]	filesystem, network, shell	`0`	9.77 kB	jongleberry
npm/[email protected]	None	`0`	8.45 kB	ai
npm/[email protected]	None	`0`	14 kB	ai
npm/[email protected]	Transitive: filesystem, shell	`+1`	1.23 MB	alangpierce
npm/[email protected]	environment, filesystem	`+2`	6.45 MB	adamwathan, malfaitrobin, reinink
npm/[email protected]	None	`0`	6.59 kB	dead_horse
npm/[email protected]	None	`0`	7.92 kB	dead_horse
npm/[email protected]	None	`0`	68 kB	dsagal2

View full report↗︎

socket-security · 2025-02-06T18:38:29Z

👍 Dependency issues cleared. Learn more about Socket for GitHub ↗︎

This PR previously contained dependency changes with security issues that have been resolved, removed, or ignored.

View full report↗︎

Next steps

Take a deeper look at the dependency

Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support [AT] socket [DOT] dev.

Remove the package

If you happen to install a dependency that Socket reports as Known Malware you should immediately remove it and select a different dependency. For other alert types, you may may wish to investigate alternative packages or consider if there are other ways to mitigate the specific risk posed by the dependency.

Mark a package as acceptable risk

To ignore an alert, reply with a comment starting with @SocketSecurity ignore followed by a space separated list of ecosystem/package-name@version specifiers. e.g. @SocketSecurity ignore npm/[email protected] or ignore all packages with @SocketSecurity ignore-all

georgewrmarshall · 2025-02-06T22:14:11Z

@SocketSecurity ignore-all

Marking following packages as acceptable risk as we are protected from supply chain attack by lavamoat

georgewrmarshall · 2025-02-06T23:02:38Z

.storybook/main.js

+        {
+          loader: 'postcss-loader',
+          options: {
+            postcssOptions: {
+              plugins: ['tailwindcss', 'autoprefixer'],
+            },
+          },
+        },


Loading tailwind styles in storybook

georgewrmarshall · 2025-02-06T23:04:03Z

development/build/styles.js

+      postcss([
+        tailwindcss(tailwindConfig),
+        autoprefixer(),
+        rtlcss(),
+        discardFonts(['woff2']),
+      ]),


Adds tailwind styles to the gulp build configuration process

georgewrmarshall · 2025-02-06T23:04:57Z

development/webpack/webpack.config.ts

@@ -289,6 +290,7 @@ const config = {
            options: {
              postcssOptions: {
                plugins: [
+                  tailwindcss(),


Adding tailwind to the webpack styles build process

georgewrmarshall · 2025-02-06T23:05:35Z

lavamoat/build-system/policy.json

@@ -890,15 +890,15 @@
    "gulp-sourcemaps>@gulp-sourcemaps/identity-map": {


Updating the lavamoat build system policy using yarn lavamoat:auto

georgewrmarshall · 2025-02-06T23:06:36Z

package.json

@@ -300,6 +300,7 @@
    "@metamask/browser-passworder": "^4.3.0",
    "@metamask/contract-metadata": "^2.5.0",
    "@metamask/controller-utils": "^11.4.0",
+    "@metamask/design-system-tailwind-preset": "npm:@metamask-previews/[email protected]",


Importing a temporary preview build of the design system Tailwind preset to standardize all Tailwind configs across the organization and ensure alignment with the design system.

georgewrmarshall · 2025-02-06T23:07:27Z

package.json

@@ -665,6 +666,7 @@
    "style-loader": "^0.21.0",
    "stylelint": "^13.6.1",
    "superstruct": "^1.0.3",
+    "tailwindcss": "^3.3.0",


Adding tailwind as a dependency. v4 has been release but we need to check compatibility with the design system preset and other platforms that use tailwind e.g. portfolio

georgewrmarshall · 2025-02-06T23:13:35Z

tailwind.config.js

+    extend: {},
+  },
+  plugins: [],
+};


This is the Tailwind CSS configuration file that:

Tells Tailwind to scan UI files and MetaMask's design system files for CSS classes

Uses MetaMask's design system preset for styling

Removes default Tailwind colors (we only need the colors provided by the design system preset)

georgewrmarshall · 2025-02-06T23:14:25Z

tailwind.config.js

+module.exports = {
+  content: [
+    './ui/**/*.{js,jsx,ts,tsx}',
+    './node_modules/@metamask/design-system-react/**/*.{cjs,mjs}',


We can probably remove this if we want as we are no longer importing the design system react library

georgewrmarshall · 2025-02-06T23:14:51Z

ui/components/component-library/box/box.stories.tsx

-        margin={2}
-        padding={4}
-        backgroundColor={BackgroundColor.backgroundAlternative}
-        borderColor={BorderColor.borderMuted}
+        className="m-2 p-4 bg-alternative border border-muted"


Example of replacing Box style utility props for tailwind classnames

georgewrmarshall · 2025-02-06T23:16:04Z

ui/css/index.scss

@@ -1,7 +1,7 @@
 /*
  MetaMask design system imports
 */
-@import './reset.scss';


Tailwind CSS includes its own reset, so we can remove this one. In fact, there's a specificity issue where the reset is overriding Tailwind class names so we need to replace it in favor of the tailwind reset

georgewrmarshall · 2025-02-06T23:16:23Z

ui/css/index.scss

@@ -1,7 +1,7 @@
 /*
  MetaMask design system imports
 */
-@import './reset.scss';
+@import './tailwind';


Importing the tailwind stylesheet into index.css

georgewrmarshall · 2025-02-06T23:16:35Z

ui/css/tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;


Default Tailwind stylesheet

metamaskbot · 2025-02-06T23:59:08Z

Builds ready [b0e335f]

builds: chrome, firefox
builds (flask): chrome, firefox
builds (MMI): chrome
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Bundle Size Stats
mv2: E2e Actions Stats
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6, 7
- common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
- ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
- content-script: 0
- offscreen: 0

Page Load Metrics (1557 ± 49 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	249	1884	1499	304	146
		domContentLoaded	1397	1813	1529	91	44
		load	1406	1875	1557	103	49
		domInteractive	22	42	27	5	2
		backgroundConnect	8	62	31	20	10
		firstReactRender	15	70	33	23	11
		getState	4	45	8	9	4
		initialActions	0	0	0	0	0
		loadScripts	1014	1342	1113	80	38
		setupStore	7	53	15	15	7
		uiStartup	1570	2096	1779	118	57

Bundle size diffs

background: 0 Bytes (0.00%)
ui: 0 Bytes (0.00%)
common: 0 Bytes (0.00%)

georgewrmarshall · 2025-02-07T19:37:01Z

test/integration/config/setupAfter.js

@@ -1,6 +1,6 @@
 // This file is for Jest-specific setup only and runs before our Jest tests.
 import { jestPreviewConfigure } from 'jest-preview';
-import '../config/assets/index.css';
+// import '../config/assets/index.css';


Temporary fix for failing integration tests. Still need to figure out the timeout here. After this PR is merged it will be fixed but it may need to be adjusted in future #30214

metamaskbot · 2025-02-07T19:37:37Z

Builds ready [37274af]

builds: chrome, firefox
builds (flask): chrome, firefox
builds (MMI): chrome
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Bundle Size Stats
mv2: E2e Actions Stats
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6, 7
- common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
- ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
- content-script: 0
- offscreen: 0

Page Load Metrics (1750 ± 89 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	412	2110	1671	339	163
		domContentLoaded	1424	2082	1716	181	87
		load	1433	2105	1750	185	89
		domInteractive	25	99	39	22	10
		backgroundConnect	9	79	37	21	10
		firstReactRender	16	68	33	19	9
		getState	5	73	24	21	10
		initialActions	0	1	0	0	0
		loadScripts	993	1613	1257	159	76
		setupStore	6	64	17	17	8
		uiStartup	1607	2359	1992	194	93

Bundle size diffs

background: 0 Bytes (0.00%)
ui: 0 Bytes (0.00%)
common: 0 Bytes (0.00%)

metamaskbot · 2025-02-07T22:31:32Z

Builds ready [aa9c4bb]

builds: chrome, firefox
builds (flask): chrome, firefox
builds (MMI): chrome
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Bundle Size Stats
mv2: E2e Actions Stats
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6, 7
- common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
- ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
- content-script: 0
- offscreen: 0

Page Load Metrics (1773 ± 137 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	355	2467	1701	426	205
		domContentLoaded	1402	2291	1751	279	134
		load	1430	2381	1773	286	137
		domInteractive	23	195	53	38	18
		backgroundConnect	7	100	28	22	11
		firstReactRender	15	78	39	24	12
		getState	4	54	10	11	5
		initialActions	0	1	0	0	0
		loadScripts	1010	1757	1296	233	112
		setupStore	7	66	19	20	9
		uiStartup	1598	2594	2010	328	157

Bundle size diffs

background: 0 Bytes (0.00%)
ui: 0 Bytes (0.00%)
common: 0 Bytes (0.00%)

…nting

metamaskbot · 2025-02-13T00:04:40Z

Builds ready [cb199aa]

builds: chrome, firefox
builds (flask): chrome, firefox
builds (MMI): chrome
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Bundle Size Stats
mv2: E2e Actions Stats
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6, 7, 8
- common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
- ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
- content-script: 0
- offscreen: 0

Page Load Metrics (1736 ± 58 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1472	1954	1737	119	57
		domContentLoaded	1462	1934	1705	120	58
		load	1473	1953	1736	120	58
		domInteractive	26	134	45	30	15
		backgroundConnect	9	96	30	26	13
		firstReactRender	16	99	41	29	14
		getState	5	65	14	16	8
		initialActions	0	1	0	0	0
		loadScripts	1006	1468	1239	107	51
		setupStore	8	90	32	27	13
		uiStartup	1791	2599	2060	183	88

Bundle size diffs

background: 0 Bytes (0.00%)
ui: 0 Bytes (0.00%)
common: 0 Bytes (0.00%)

georgewrmarshall added the team-design-system All issues relating to design system in Extension label Feb 6, 2025

georgewrmarshall self-assigned this Feb 6, 2025

georgewrmarshall changed the title ~~Implement Tailwind CSS (WIP)~~ chore: Implement Tailwind CSS (WIP) Feb 6, 2025

georgewrmarshall force-pushed the tailwind branch from eb28465 to ae5ffd3 Compare February 6, 2025 22:21

georgewrmarshall added the DO-NOT-MERGE Pull requests that should not be merged label Feb 6, 2025

georgewrmarshall commented Feb 6, 2025

View reviewed changes

georgewrmarshall commented Feb 7, 2025

View reviewed changes

georgewrmarshall added 5 commits February 12, 2025 14:55

feat: adding tailwind and design system preview packages

736fa78

chore: adding tailwind classnames to box story

7354c44

chore: lavamoat allow scripts auto

8706159

chore: updating lavamoat policy

aedf675

chore: removing unused design-system-react dependency

08c5341

georgewrmarshall added 8 commits February 12, 2025 14:55

chore: ignoring node/global-require in tailwind config

46c53e2

chore: updating yarn lock

482d315

chore: further fixes

f3d8b31

chore: removing default tailwind colors

f4ab8de

chore: removing reset import for ts migration dashboard and fixing li…

a9c4367

…nting

chore: temporary fix for integration tests

73d89f2

chore: removing unnneded postcss.config.js file

0ce253f

chore: changing specificity by importing tailwind css last

cb199aa

georgewrmarshall force-pushed the tailwind branch from aa9c4bb to cb199aa Compare February 12, 2025 23:30

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore: Implement Tailwind CSS (WIP) #30170

chore: Implement Tailwind CSS (WIP) #30170

georgewrmarshall commented Feb 6, 2025 •

edited

Loading

github-actions bot commented Feb 6, 2025

socket-security bot commented Feb 6, 2025 •

edited

Loading

socket-security bot commented Feb 6, 2025 •

edited

Loading

georgewrmarshall commented Feb 6, 2025

georgewrmarshall Feb 6, 2025

georgewrmarshall Feb 6, 2025

georgewrmarshall Feb 6, 2025

georgewrmarshall Feb 6, 2025

georgewrmarshall Feb 6, 2025 •

edited

Loading

georgewrmarshall Feb 6, 2025

georgewrmarshall Feb 6, 2025 •

edited

Loading

georgewrmarshall Feb 6, 2025

georgewrmarshall Feb 6, 2025

georgewrmarshall Feb 6, 2025

georgewrmarshall Feb 6, 2025

georgewrmarshall Feb 6, 2025

metamaskbot commented Feb 6, 2025

georgewrmarshall Feb 7, 2025 •

edited

Loading

metamaskbot commented Feb 7, 2025

metamaskbot commented Feb 7, 2025

metamaskbot commented Feb 13, 2025

		@@ -890,15 +890,15 @@
		"gulp-sourcemaps>@gulp-sourcemaps/identity-map": {

chore: Implement Tailwind CSS (WIP) #30170

Are you sure you want to change the base?

chore: Implement Tailwind CSS (WIP) #30170

Conversation

georgewrmarshall commented Feb 6, 2025 • edited Loading

Description

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

github-actions bot commented Feb 6, 2025

socket-security bot commented Feb 6, 2025 • edited Loading

socket-security bot commented Feb 6, 2025 • edited Loading

Next steps

georgewrmarshall commented Feb 6, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

georgewrmarshall Feb 6, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

georgewrmarshall Feb 6, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

metamaskbot commented Feb 6, 2025

georgewrmarshall Feb 7, 2025 • edited Loading

Choose a reason for hiding this comment

metamaskbot commented Feb 7, 2025

metamaskbot commented Feb 7, 2025

metamaskbot commented Feb 13, 2025

georgewrmarshall commented Feb 6, 2025 •

edited

Loading

socket-security bot commented Feb 6, 2025 •

edited

Loading

socket-security bot commented Feb 6, 2025 •

edited

Loading

georgewrmarshall Feb 6, 2025 •

edited

Loading

georgewrmarshall Feb 6, 2025 •

edited

Loading

georgewrmarshall Feb 7, 2025 •

edited

Loading