Skip to content

Tailwind 4 migration #2641

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

Open
amazingphilippe wants to merge 7 commits into
base: main
Choose a base branch
from
Open

Tailwind 4 migration #2641

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
9d39627
Tailwind 4 migration - with Node 20 - mvp
amazingphilippe Apr 1, 2026
1f29ef2
Format
amazingphilippe Apr 1, 2026
90bdf42
node version in workflows
amazingphilippe Apr 2, 2026
43b5f38
postgres options so that cypress e2e runs on node 20
amazingphilippe Apr 2, 2026
bb4c8fc
Merge branch 'main' into debt/tailwind4
amazingphilippe Apr 10, 2026
564bb71
Merge branch 'main' into debt/tailwind4
Apr 24, 2026
86ca4bd
add back skip link styles
amazingphilippe Apr 24, 2026
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
3 changes: 2 additions & 1 deletion app/assets/javascripts/tiptap/editor.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
@reference "../../stylesheets/tailwind/style.css";
/* Basic editor styles */
.tiptap {
min-height: 400px;
Expand Down Expand Up @@ -332,7 +333,7 @@
background-size: auto 175%;
background-position: right 0.75rem bottom 75%;
z-index: -1;
@apply bg-tryRte bg-no-repeat;
@apply bg-(--image-tryRte) bg-no-repeat;
}
@container (width < 680px) {
.toolbar.markdown-mode:after {
Expand Down
1 change: 1 addition & 0 deletions app/assets/javascripts/tiptap/tooltip.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
@reference "../../stylesheets/tailwind/style.css";
.rte-tooltip-wrapper {
position: relative;
display: inline-block;
Expand Down
2 changes: 1 addition & 1 deletion app/assets/stylesheets/tailwind/components/browse-list.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
.browse-list .browse-sub-list {
@apply mt-gutterHalf ml-gutter;
}
@screen md {
@variant md {
.browse-list .browse-sub-list {
margin-left: 60px;
}
Expand Down
4 changes: 2 additions & 2 deletions app/assets/stylesheets/tailwind/components/empty-list.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,10 @@
@apply bg-no-repeat bg-contain;
background-origin: content-box;
background-size: contain;
@screen sm {
@variant sm {
background-size: auto 75%;
}
@screen lg {
@variant lg {
background-size: contain;
}
}
Expand Down
6 changes: 3 additions & 3 deletions app/assets/stylesheets/tailwind/components/fullscreen-table.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,17 +100,17 @@
svg.table-overflow rect {
fill: url(#cut);
}
@screen sm {
@variant sm {
svg.table-overflow rect {
fill: url(#cut-sm);
}
}
@screen md {
@variant md {
svg.table-overflow rect {
fill: url(#cut-md);
}
}
@screen lg {
@variant lg {
svg.table-overflow rect {
fill: url(#cut-lg);
}
Expand Down
8 changes: 4 additions & 4 deletions app/assets/stylesheets/tailwind/components/layout.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@
.banner-with-tick,
.banner-default-with-tick {
background-position: 15px 15px;
@apply bg-tick bg-no-repeat bg-19 py-gutterHalf px-gutterAndAHalf;
@apply bg-tick bg-no-repeat bg-[1em] py-gutterHalf px-gutterAndAHalf;
}

.banner-list-bullet {
Expand All @@ -59,7 +59,7 @@
@apply pb-gutter outline-none;
}

@screen md {
@variant md {
#content {
padding-bottom: 90px;
}
Expand All @@ -72,14 +72,14 @@
@apply my-0 mx-gutterHalf;
}

@screen md {
@variant md {
#content,
.global-cookie-message p {
@apply mx-gutter;
}
}

@screen lg {
@variant lg {
#content,
.global-cookie-message p {
@apply mx-auto;
Expand Down
2 changes: 1 addition & 1 deletion app/assets/stylesheets/tailwind/components/menu.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
@apply transform rotate-180;
}

:has > [data-module="menu"] {
:has(> [data-module="menu"]) {

@amazingphilippe amazingphilippe Apr 24, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

It picked up this syntax error that previously went unnoticed

@apply relative;
}

Expand Down
12 changes: 6 additions & 6 deletions app/assets/stylesheets/tailwind/components/message.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,10 +66,10 @@
.template-list-folder {
background-size: auto 20px;
background-position: 0px 4px;
@apply inline pl-16 bg-no-repeat bg-folderBluePng bg-folderBlue; /* Overwrite for browsers that support SVG */
@apply inline pl-16 bg-no-repeat bg-folderBlue; /* Overwrite for browsers that support SVG */
}
.template-list-folder:hover {
@apply bg-folderBlueHoverPng bg-folderBlueHover;
@apply bg-folderBlueHover;
}
.template-list-template a {
@apply inline;
Expand All @@ -80,7 +80,7 @@
.template-list-selected-counter {
@apply text-gray-grey1 mx-0 my-gutterHalf;
}
@screen lg {
@variant lg {
.template-list-selected-counter {
top: 29px;
@apply absolute right-0 m-0;
Expand Down Expand Up @@ -115,7 +115,7 @@
@apply inline bg-no-repeat align-top text-smaller min-h-12;
}
.folder-heading-folder {
@apply p-0 pl-gutter bg-folderBlackPng bg-folderBlack;
@apply p-0 pl-gutter bg-folderBlack;
}
.folder-heading-folder-group:not(:last-child) {
@apply mr-4 mb-4;
Expand All @@ -132,10 +132,10 @@
@apply inline;
}
.folder-heading a.folder-heading-folder {
@apply inline bg-folderBluePng bg-folderBlue;
@apply inline bg-folderBlue;
}
.folder-heading a.folder-heading-folder:hover {
@apply bg-folderBlueHoverPng bg-folderBlueHover;
@apply bg-folderBlueHover;
}
.folder-heading a.folder-heading-folder-truncated {
@apply inline-block;
Expand Down
2 changes: 1 addition & 1 deletion app/assets/stylesheets/tailwind/components/navigation.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@
}

/* https://github.com/alphagov/product-page-example/blob/master/source/stylesheets/modules/_sub-navigation.scss */
@screen md {
@variant md {
.sub-navigation {
margin-top: 45px;
}
Expand Down
2 changes: 1 addition & 1 deletion app/assets/stylesheets/tailwind/components/page-footer.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@
}

.page-footer-secondary-link {
@apply block mt-gutter w-max-content;
@apply block mt-gutter w-max;
}

.page-footer-right-aligned-link {
Expand Down
2 changes: 1 addition & 1 deletion app/assets/stylesheets/tailwind/components/previous-next-navigation.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@
@apply hidden;
}

@screen sm {
@variant sm {
.previous-and-next-navigation .next-page {
@apply ml-auto;
}
Expand Down
2 changes: 1 addition & 1 deletion app/assets/stylesheets/tailwind/components/stick-at-top-when-scrolling.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@
}

.js-stick-at-bottom-when-scrolling.content-fixed {
@apply transition-background duration-300 ease-in-out;
@apply transition-[background] duration-300 ease-in-out;
}
.js-stick-at-bottom-when-scrolling-loaded.content-fixed-onload {
@apply transition-none;
Expand Down
2 changes: 1 addition & 1 deletion app/assets/stylesheets/tailwind/components/table.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -167,7 +167,7 @@
.table-field-status-no {
text-indent: -999em;
background-position: 50% 50%;
@apply block bg-no-repeat bg-19;
@apply block bg-no-repeat bg-[1em];
}
.table-field-status-yes {
@apply bg-tick;
Expand Down
2 changes: 1 addition & 1 deletion app/assets/stylesheets/tailwind/components/tou-dialog.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
margin: 0;
max-height: 100vh;

@screen lg {
@variant lg {
margin: auto;
max-height: calc(100vh - 6rem);
}
Expand Down
12 changes: 4 additions & 8 deletions app/assets/stylesheets/tailwind/components/typography.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
p + p {
margin-top: 2.25em;
}
@screen sm {
@variant sm {
p {
margin-top: 0.0658em;
margin-bottom: 1.0526em;
Expand Down Expand Up @@ -54,7 +54,7 @@
margin-bottom: 1.0526em;
@apply font-sans text-smaller leading-tight font-bold block;
}
@screen md {
@variant md {
.page-content h3,
.heading-small {
margin-top: 2.3684em;
Expand All @@ -68,7 +68,7 @@
margin-bottom: 0.5em;
@apply font-sans text-base leading-tight font-bold mt-gutter block;
}
@screen sm {
@variant sm {
.page-content h2,
.heading-medium {
margin-top: 1.875em;
Expand All @@ -90,7 +90,7 @@
padding-bottom: 6px;
@apply block text-gray-grey1 text-title leading-tight;
}
@screen md {
@variant md {
.page-content h1,
.page-content.home h2,
.heading-large {
Expand Down Expand Up @@ -129,9 +129,5 @@
font-weight: bold;
}

.w-max-content {
width: max-content;
}

/*! purgecss end ignore */
}
1 change: 0 additions & 1 deletion app/assets/stylesheets/tailwind/elements/details.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,6 @@
summary::-moz-details-marker,
summary::-ms-details-marker,
summary::-o-details-marker,
summary::details-marker,
summary::-webkit-details-marker {
@apply hidden;
}
Expand Down
8 changes: 4 additions & 4 deletions app/assets/stylesheets/tailwind/elements/form-multiple-choice.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
@apply block float-none clear-left relative p-0 mb-4;
padding-left: 38px;
}
@screen sm {
@variant sm {
.multiple-choice {
@apply float-left;
}
Expand All @@ -26,7 +26,7 @@
touch-action: manipulation;
}

@screen sm {
@variant sm {
.mutiple-choice label {
@apply float-left;
padding-top: 7px;
Expand Down Expand Up @@ -95,7 +95,7 @@
.inline .multiple-choice {
@apply clear-none;
}
@screen sm {
@variant sm {
.inline .multiple-choice {
@apply mb-0 mr-gutter;
}
Expand All @@ -107,7 +107,7 @@
fieldset:has(img):has(.multiple-choice:nth-of-type(5)) {
@apply grid gap-gutterHalf;
}
@screen md {
@variant md {
fieldset:has(img):has(.multiple-choice:nth-of-type(5)) {
@apply grid-cols-2;
}
Expand Down
2 changes: 1 addition & 1 deletion app/assets/stylesheets/tailwind/elements/form-validation.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
.localized-field:has(.form-group-error) {
@apply mr-4 pl-4 border-l-4 border-red;
}
@screen md {
@variant md {
.form-group-error,
.localized-field:has(.form-group-error) {
border-left-width: 5px;
Expand Down
6 changes: 3 additions & 3 deletions app/assets/stylesheets/tailwind/elements/forms.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
fieldset.after-error-summary {
margin-top: -15px;
}
@screen sm {
@variant sm {
fieldset.after-error-summary {
margin-top: -30px;
}
Expand Down Expand Up @@ -53,7 +53,7 @@
padding: 5px 4px 4px;
@apply box-border text-smaller leading-tight font-normal font-body w-full border-2 border-solid border-black;
}
@screen md {
@variant md {
.form-control {
@apply w-1/2;
}
Expand All @@ -65,7 +65,7 @@
.form-control-5em {
@apply w-full;
}
@screen md {
@variant md {
.form-control-5em {
width: 5em;
}
Expand Down
4 changes: 2 additions & 2 deletions app/assets/stylesheets/tailwind/elements/panels.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@
.panel-container {
@apply flex w-full flex-col mb-12;
}
@screen lg {
@variant lg {
.panel-container {
@apply flex-row;
}
Expand All @@ -66,7 +66,7 @@
.panel-preview {
@apply mt-6 ml-0;
}
@screen lg {
@variant lg {
.panel-preview {
@apply mt-0 ml-6;
}
Expand Down
Loading
Loading