Skip to content

Commit 9fbaefb

Browse files
author
Zaydek Michels-Gualtieri
committed
Added Tailwind support for dark mode and deprecated the Tailwind UI plugin due to this issue: tailwindlabs/tailwindcss#2322 
1 parent c8a19ee commit 9fbaefb

File tree

6 files changed

+126
-227
lines changed

6 files changed

+126
-227
lines changed

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,6 @@
2121
"babel-jest": "latest",
2222
"eslint": "latest",
2323
"jest": "latest",
24-
"tailwindcss": "^1.8.3"
24+
"tailwindcss": "latest"
2525
}
2626
}

‎src/pages/index.js

+6-2
Original file line numberDiff line numberDiff line change
@@ -522,7 +522,7 @@ const MemoSearch = React.memo(({ state, dispatch }) => {
522522
</svg>
523523
)}
524524
</Apply>
525-
{tooltip === "variant" && (
525+
{true && (
526526
<div className="pt-2 absolute right-0 top-full">
527527
<LightTooltip apply="text-left whitespace-pre">
528528
{/* <TextRow> */}
@@ -766,7 +766,11 @@ const IconApp = ({ state, dispatch }) => {
766766
>
767767
<div id="app-grid">
768768
{state.search.results.map((each, x) => (
769-
<article key={each.name} className="pb-full relative">
769+
<article
770+
key={each.name}
771+
className="relative"
772+
style={{ paddingBottom: "100%" }}
773+
>
770774
<div className="absolute inset-0">
771775
<MemoIcon
772776
variant={Object.keys(state.controls.variant).find(each => state.controls.variant[each] === true)}

‎src/stylesheets/tailwindcss/experimental-color-vars.css

+104-113
Original file line numberDiff line numberDiff line change
@@ -1,115 +1,106 @@
11
html {
2-
--transparent: transparent;
3-
--white: #ffffff;
4-
--black: #000000;
5-
--gray-50: #f9fafb;
6-
--gray-100: #f4f5f7;
7-
--gray-200: #e5e7eb;
8-
--gray-300: #d2d6dc;
9-
--gray-400: #9fa6b2;
10-
--gray-500: #6b7280;
11-
--gray-600: #4b5563;
12-
--gray-700: #374151;
13-
--gray-800: #252f3f;
14-
--gray-900: #161e2e;
15-
--cool-gray-50: #f8fafc;
16-
--cool-gray-100: #f1f5f9;
17-
--cool-gray-200: #e2e8f0;
18-
--cool-gray-300: #cfd8e3;
19-
--cool-gray-400: #97a6ba;
20-
--cool-gray-500: #64748b;
21-
--cool-gray-600: #475569;
22-
--cool-gray-700: #364152;
23-
--cool-gray-800: #27303f;
24-
--cool-gray-900: #1a202e;
25-
--red-50: #fdf2f2;
26-
--red-100: #fde8e8;
27-
--red-200: #fbd5d5;
28-
--red-300: #f8b4b4;
29-
--red-400: #f98080;
30-
--red-500: #f05252;
31-
--red-600: #e02424;
32-
--red-700: #c81e1e;
33-
--red-800: #9b1c1c;
34-
--red-900: #771d1d;
35-
--orange-50: #fff8f1;
36-
--orange-100: #feecdc;
37-
--orange-200: #fcd9bd;
38-
--orange-300: #fdba8c;
39-
--orange-400: #ff8a4c;
40-
--orange-500: #ff5a1f;
41-
--orange-600: #d03801;
42-
--orange-700: #b43403;
43-
--orange-800: #8a2c0d;
44-
--orange-900: #73230d;
45-
--yellow-50: #fdfdea;
46-
--yellow-100: #fdf6b2;
47-
--yellow-200: #fce96a;
48-
--yellow-300: #faca15;
49-
--yellow-400: #e3a008;
50-
--yellow-500: #c27803;
51-
--yellow-600: #9f580a;
52-
--yellow-700: #8e4b10;
53-
--yellow-800: #723b13;
54-
--yellow-900: #633112;
55-
--green-50: #f3faf7;
56-
--green-100: #def7ec;
57-
--green-200: #bcf0da;
58-
--green-300: #84e1bc;
59-
--green-400: #31c48d;
60-
--green-500: #0e9f6e;
61-
--green-600: #057a55;
62-
--green-700: #046c4e;
63-
--green-800: #03543f;
64-
--green-900: #014737;
65-
--teal-50: #edfafa;
66-
--teal-100: #d5f5f6;
67-
--teal-200: #afecef;
68-
--teal-300: #7edce2;
69-
--teal-400: #16bdca;
70-
--teal-500: #0694a2;
71-
--teal-600: #047481;
72-
--teal-700: #036672;
73-
--teal-800: #05505c;
74-
--teal-900: #014451;
75-
--blue-50: #ebf5ff;
76-
--blue-100: #e1effe;
77-
--blue-200: #c3ddfd;
78-
--blue-300: #a4cafe;
79-
--blue-400: #76a9fa;
80-
--blue-500: #3f83f8;
81-
--blue-600: #1c64f2;
82-
--blue-700: #1a56db;
83-
--blue-800: #1e429f;
84-
--blue-900: #233876;
85-
--indigo-50: #f0f5ff;
86-
--indigo-100: #e5edff;
87-
--indigo-200: #cddbfe;
88-
--indigo-300: #b4c6fc;
89-
--indigo-400: #8da2fb;
90-
--indigo-500: #6875f5;
91-
--indigo-600: #5850ec;
92-
--indigo-700: #5145cd;
93-
--indigo-800: #42389d;
94-
--indigo-900: #362f78;
95-
--purple-50: #f6f5ff;
96-
--purple-100: #edebfe;
97-
--purple-200: #dcd7fe;
98-
--purple-300: #cabffd;
99-
--purple-400: #ac94fa;
100-
--purple-500: #9061f9;
101-
--purple-600: #7e3af2;
102-
--purple-700: #6c2bd9;
103-
--purple-800: #5521b5;
104-
--purple-900: #4a1d96;
105-
--pink-50: #fdf2f8;
106-
--pink-100: #fce8f3;
107-
--pink-200: #fad1e8;
108-
--pink-300: #f8b4d9;
109-
--pink-400: #f17eb8;
110-
--pink-500: #e74694;
111-
--pink-600: #d61f69;
112-
--pink-700: #bf125d;
113-
--pink-800: #99154b;
114-
--pink-900: #751a3d;
2+
--transparent: transparent;
3+
--currentColor: currentColor;
4+
--black: #000000;
5+
--white: #ffffff;
6+
--gray-50: #f9fafb;
7+
--gray-100: #f4f5f7;
8+
--gray-200: #e5e7eb;
9+
--gray-300: #d2d6dc;
10+
--gray-400: #9fa6b2;
11+
--gray-500: #6b7280;
12+
--gray-600: #4b5563;
13+
--gray-700: #374151;
14+
--gray-800: #252f3f;
15+
--gray-900: #161e2e;
16+
--red-50: #fdf2f2;
17+
--red-100: #fde8e8;
18+
--red-200: #fbd5d5;
19+
--red-300: #f8b4b4;
20+
--red-400: #f98080;
21+
--red-500: #f05252;
22+
--red-600: #e02424;
23+
--red-700: #c81e1e;
24+
--red-800: #9b1c1c;
25+
--red-900: #771d1d;
26+
--orange-50: #fff8f1;
27+
--orange-100: #feecdc;
28+
--orange-200: #fcd9bd;
29+
--orange-300: #fdba8c;
30+
--orange-400: #ff8a4c;
31+
--orange-500: #ff5a1f;
32+
--orange-600: #d03801;
33+
--orange-700: #b43403;
34+
--orange-800: #8a2c0d;
35+
--orange-900: #73230d;
36+
--yellow-50: #fdfdea;
37+
--yellow-100: #fdf6b2;
38+
--yellow-200: #fce96a;
39+
--yellow-300: #faca15;
40+
--yellow-400: #e3a008;
41+
--yellow-500: #c27803;
42+
--yellow-600: #9f580a;
43+
--yellow-700: #8e4b10;
44+
--yellow-800: #723b13;
45+
--yellow-900: #633112;
46+
--green-50: #f3faf7;
47+
--green-100: #def7ec;
48+
--green-200: #bcf0da;
49+
--green-300: #84e1bc;
50+
--green-400: #31c48d;
51+
--green-500: #0e9f6e;
52+
--green-600: #057a55;
53+
--green-700: #046c4e;
54+
--green-800: #03543f;
55+
--green-900: #014737;
56+
--teal-50: #edfafa;
57+
--teal-100: #d5f5f6;
58+
--teal-200: #afecef;
59+
--teal-300: #7edce2;
60+
--teal-400: #16bdca;
61+
--teal-500: #0694a2;
62+
--teal-600: #047481;
63+
--teal-700: #036672;
64+
--teal-800: #05505c;
65+
--teal-900: #014451;
66+
--blue-50: #ebf5ff;
67+
--blue-100: #e1effe;
68+
--blue-200: #c3ddfd;
69+
--blue-300: #a4cafe;
70+
--blue-400: #76a9fa;
71+
--blue-500: #3f83f8;
72+
--blue-600: #1c64f2;
73+
--blue-700: #1a56db;
74+
--blue-800: #1e429f;
75+
--blue-900: #233876;
76+
--indigo-50: #f0f5ff;
77+
--indigo-100: #e5edff;
78+
--indigo-200: #cddbfe;
79+
--indigo-300: #b4c6fc;
80+
--indigo-400: #8da2fb;
81+
--indigo-500: #6875f5;
82+
--indigo-600: #5850ec;
83+
--indigo-700: #5145cd;
84+
--indigo-800: #42389d;
85+
--indigo-900: #362f78;
86+
--purple-50: #f6f5ff;
87+
--purple-100: #edebfe;
88+
--purple-200: #dcd7fe;
89+
--purple-300: #cabffd;
90+
--purple-400: #ac94fa;
91+
--purple-500: #9061f9;
92+
--purple-600: #7e3af2;
93+
--purple-700: #6c2bd9;
94+
--purple-800: #5521b5;
95+
--purple-900: #4a1d96;
96+
--pink-50: #fdf2f8;
97+
--pink-100: #fce8f3;
98+
--pink-200: #fad1e8;
99+
--pink-300: #f8b4d9;
100+
--pink-400: #f17eb8;
101+
--pink-500: #e74694;
102+
--pink-600: #d61f69;
103+
--pink-700: #bf125d;
104+
--pink-800: #99154b;
105+
--pink-900: #751a3d;
115106
}

‎tailwind-defaultVariants.js

-100
This file was deleted.

‎tailwind.config.js

+14-10
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,11 @@ const defaultTheme = require("tailwindcss/defaultTheme")
33
const tw = n => `${n * 4 / 16}rem`
44

55
module.exports = {
6-
// dark: "media",
6+
dark: "media",
77
experimental: {
8-
// darkModeVariant: true,
8+
darkModeVariant: true,
99
uniformColorPalette: true,
1010
},
11-
plugins: [require("@tailwindcss/ui")],
1211
purge: ["./src/**/*.js"],
1312
theme: {
1413
extend: {
@@ -22,13 +21,12 @@ module.exports = {
2221
},
2322
boxShadow: {
2423
"px": defaultTheme.boxShadow.xs,
25-
"1": defaultTheme.boxShadow.sm,
26-
"2": defaultTheme.boxShadow.default,
27-
"3": defaultTheme.boxShadow.md,
28-
"4": defaultTheme.boxShadow.lg,
29-
"5": defaultTheme.boxShadow.xl,
30-
"6": defaultTheme.boxShadow["2xl"],
31-
24+
"1": defaultTheme.boxShadow.sm,
25+
"2": defaultTheme.boxShadow.default,
26+
"3": defaultTheme.boxShadow.md,
27+
"4": defaultTheme.boxShadow.lg,
28+
"5": defaultTheme.boxShadow.xl,
29+
"6": defaultTheme.boxShadow["2xl"],
3230
"px-1": defaultTheme.boxShadow.xs + ", " + defaultTheme.boxShadow.sm,
3331
"px-2": defaultTheme.boxShadow.xs + ", " + defaultTheme.boxShadow.default,
3432
"px-3": defaultTheme.boxShadow.xs + ", " + defaultTheme.boxShadow.md,
@@ -42,6 +40,12 @@ module.exports = {
4240
fontFamily: {
4341
sans: [...defaultTheme.fontFamily.sans.slice(0, 3), "Inter", ...defaultTheme.fontFamily.sans.slice(3)],
4442
},
43+
inset: {
44+
"-1/2": "-50%",
45+
"1/2": "50%",
46+
"full": "100%",
47+
"-full": "-100%",
48+
},
4549
},
4650
screens: {
4751
sm: (640) + "px",

0 commit comments

Comments
 (0)