Skip to content

Use tailwind for more things#105

Merged
tstirrat15 merged 2 commits intomainfrom
use-tailwind-for-more-things
Feb 7, 2026
Merged

Use tailwind for more things#105
tstirrat15 merged 2 commits intomainfrom
use-tailwind-for-more-things

Conversation

@tstirrat15
Copy link
Contributor

Description

Part of ripping out material. This gets rid of some of the material styling.

Changes

  • Use tailwind for more things
  • Bring in a useMediaQuery hook

Testing

Review.

@vercel
Copy link

vercel bot commented Feb 6, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
playground Ready Ready Preview, Comment Feb 6, 2026 10:37pm

Request Review

@tstirrat15 tstirrat15 force-pushed the use-tailwind-for-more-things branch from 3958b64 to dbe0467 Compare February 6, 2026 22:36
Copy link
Contributor Author

@tstirrat15 tstirrat15 left a comment

Choose a reason for hiding this comment

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

See comments

foundVia: {
marginTop: theme.spacing(1),
},
foundViaList: {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This was the only one that I had to recreate in tailwind; I verified by manual inspection that the styling I've come up with is equivalent.

[DeveloperError_Source.UNKNOWN_SOURCE]: undefined,
};

const useErrorDisplayStyles = makeStyles((theme: Theme) =>
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Most of these styles were already unused as of the beginning of writing this PR

Comment on lines 33 to 34
// NOTE: the \2192 here is the → character; tailwind needs it as an escape sequence.
<li className="after:content-['\2192'] after:ml-2 last:after:content-none" key={item}>{item}</li>
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This was a little funky but it works

<div className={classes.validationErrorContext}>
<div className="m-2">
In
<Link className={classes.link} to={DataStorePaths.Schema()}>
Copy link
Contributor Author

Choose a reason for hiding this comment

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

I don't think this styling was doing anything.

import { useEffect, useMemo, useRef, useState } from "react";
import { flushSync } from "react-dom";

import { useMediaQuery } from "@/hooks/use-media-query";
Copy link
Contributor Author

Choose a reason for hiding this comment

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

The new hook is interchangeable.

@tstirrat15 tstirrat15 merged commit 8212722 into main Feb 7, 2026
5 checks passed
@github-actions github-actions bot locked and limited conversation to collaborators Feb 7, 2026
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants