Skip to content

tailwind #1762

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 10 commits into
base: main
Choose a base branch
from
+496 −17
Draft

tailwind #1762

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
55fabb4
tailwind
Fil Oct 17, 2024
65dd010
fix test
Fil Oct 17, 2024
b453fc4
windows?
Fil Oct 17, 2024
65e7676
part of the solution for dark mode
Fil Oct 17, 2024
1521791
separate tailwind.css; always refresh it in preview; blocklist the gr…
Fil Oct 25, 2024
cfc5867
we have to use tailwind's base.css otherwise some of the styles are b…
Fil Oct 25, 2024
f0167be
breakpoints in coordination with framework's
Fil Oct 25, 2024
91401b7
better breakpoints
Fil Oct 25, 2024
f3b5771
document tailwind
Fil Oct 28, 2024
22f7265
Merge branch 'main' into fil/tailwind
Fil Nov 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/client/tailwind.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
/* @import "tailwindcss/base"; */
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
4 changes: 4 additions & 0 deletions src/rollup.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,10 @@ export async function bundleStyles({
});
let text = result.outputFiles[0].text;
if (path === getClientPath("stdlib/inputs.css")) text = rewriteInputsNamespace(text);
// dirty patch for tailwind: remove margin:0 and styles resets for headers
// etc. It should probably be a tailwind plugin instead.
if (path === getClientPath("tailwind.css"))
text = text.replaceAll(/}[^{]*h1,\n*h2,\n*h3,\n*h4,\n*h5,\n*h6[^}]+}\s*/g, "}");
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You want the typography plugin and prose class.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe, but there are other resets that wreck our page, and we might want to find a way to remove the resets independently of adding /prose/ (this works already, anyway). I was thinking maybe a custom plugin we'd inline.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We may need to commit to Tailwind and rewrite any of our own styles accordingly.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes that's a good possibility. For now I'm merely taking stock of the things that change.

The other big change I've noticed are the grid-cols-* classes, which I have to block for now because they are quite different. Ours is responsive to width, tailwind's responsiveness is based on a breakpoint modifier (e.g. lg:grid-cols-3).

blocklist: ["grid", "grid-cols-2", "grid-cols-3", "grid-cols-4"],


return text;
}
Expand Down
Loading