Skip to content

Commit

Permalink
fix: pin tailwind to version used in production
Browse files Browse the repository at this point in the history
I've been trying to get the file list in the my development version working,
and was struggling even after pointing the website at the production version.

It turns out that when this website was updated from Tachyons to Tailwind, a stray `collapse` style was left on the file list table:

1a29aa9#diff-f8b81b815feea0a351b1a42218602943bda2f0d4cd44b009dbbbb5f7c8c35ddaR462

At the time this was fine! Tailwind didn't have a `collapse` style until version 3.2 and 3.0/3.1 were current at the time of the transition. The production site uses Tailwind 3.1 and works just fine.

However! The version specification for the `tailwind` package in the `website` project's package.json uses a "compatible with version" specifier (https://stackoverflow.com/a/22345808) which will bring in new minor versions as they're released, so my development version used Tailwind 3.4 which _does_ have a `collapse` style that is unfortunately _very different from the Tachyon style_ - rather than mapping to the `border-collapse: collapse` style as Tachyon does, `collapse` in Tailwind translates to `visibility: collapse` - a CSS attribute intended to let developers hide specific table rows. When applied to a whole table it results in the entire table being hidden. This was the source of the bug.

This PR:

1) moves to the `border-collapse` Tailwind style to match the original intent
2) pins Tailwind to the version specified in `yarn.lock` and any patch releases (which should not introduce or remove new styles)
  • Loading branch information
travis committed Mar 26, 2024
1 parent 06712ad commit 1500204
Show file tree
Hide file tree
Showing 3 changed files with 3 additions and 3 deletions.
2 changes: 1 addition & 1 deletion packages/website/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@
"react-query": "^3.34.15",
"react-tiny-popover": "^7.0.1",
"swagger-ui-react": "^4.1.3",
"tailwindcss": "^3.0.23"
"tailwindcss": "~3.1.8"
},
"devDependencies": {
"@babel/core": "^7.17.9",
Expand Down
2 changes: 1 addition & 1 deletion packages/website/pages/files.js
Original file line number Diff line number Diff line change
Expand Up @@ -393,7 +393,7 @@ export default function Files({ user }) {
</When>
<When condition={!hasZeroNfts}>
<>
<table className="w-full collapse">
<table className="w-full border-collapse">
<thead>
<tr className="bg-nsgray">
<th>Date</th>
Expand Down
2 changes: 1 addition & 1 deletion yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -19429,7 +19429,7 @@ synchronous-promise@^2.0.15:
resolved "https://registry.yarnpkg.com/synchronous-promise/-/synchronous-promise-2.0.16.tgz#669b75e86b4295fdcc1bb0498de9ac1af6fd51a9"
integrity sha512-qImOD23aDfnIDNqlG1NOehdB9IYsn1V9oByPjKY1nakv2MQYCEMyX033/q+aEtYCpmYK1cv2+NTmlH+ra6GA5A==

tailwindcss@^3.0.23:
tailwindcss@~3.1.8:
version "3.1.8"
resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.1.8.tgz#4f8520550d67a835d32f2f4021580f9fddb7b741"
integrity sha512-YSneUCZSFDYMwk+TGq8qYFdCA3yfBRdBlS7txSq0LUmzyeqRe3a8fBQzbz9M3WS/iFT4BNf/nmw9mEzrnSaC0g==
Expand Down

0 comments on commit 1500204

Please sign in to comment.