Skip to content
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

Jump to bottom

Upgrade Tailwind CSS to v4 #10850

Closed
blesildaramirez opened this issue Jan 27, 2025 · 1 comment
Closed

Upgrade Tailwind CSS to v4 #10850

blesildaramirez opened this issue Jan 27, 2025 · 1 comment
Assignees
@blesildaramirez
Labels
Accessibility Any issue that impacts assistive technology or users with visual or physical impairments.

Comments

@blesildaramirez
Copy link
Contributor

blesildaramirez commented Jan 27, 2025 •
edited
Loading

Upgrade Tailwind CSS to v4 for OJS/OMP/OPS.
https://tailwindcss.com/docs/upgrade-guide

UPDATE:
We’re not moving forward with Tailwind v4 due to browser compatibility concerns with older browsers. Tailwind v4 introduces @theme as the new way to extract theme values directly in CSS, replacing the tailwind.config.js. However, since @theme relies on modern CSS features (@layer) that are not well-supported in older browsers, upgrading could lead to unexpected styling issues in legacy environments.
For more details, see:
https://tailwindcss.com/blog/tailwindcss-v4#designed-for-the-modern-web

As a result, we will keep using Tailwind v3, and make our theme CSS variables accessible for plugin use.

Pull requests:
ui-library: pkp/ui-library#523 (merged)
ojs: pkp/ojs#4654 (merged)
omp: pkp/omp#1836 (merged)
ops: pkp/ops#872 (merged)

Links for Tailwind v4 changes:
ui-library: pkp/ui-library#524
ojs: pkp/ojs#4657
@blesildaramirez blesildaramirez added the Accessibility Any issue that impacts assistive technology or users with visual or physical impairments. label Jan 27, 2025
@blesildaramirez blesildaramirez self-assigned this Jan 27, 2025
@blesildaramirez blesildaramirez mentioned this issue Jan 28, 2025
Open
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Jan 29, 2025
@blesildaramirez
pkp/pkp-lib#10850 Add tailwind.css for migration
3867d9c
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Jan 29, 2025
@blesildaramirez
pkp/pkp-lib#10850 Migrate tailwind css from v3 to v4
9b113e0
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Jan 29, 2025
@blesildaramirez
pkp/pkp-lib#10850 Fix error in @apply directive
6ae5bf7
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Jan 29, 2025
@blesildaramirez
pkp/pkp-lib#10850 Re-add tailwind.config.js file
e9e60d2
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Feb 3, 2025
@blesildaramirez
pkp/pkp-lib#10850 Define css variables used for tailwind config
15b79cf
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Feb 3, 2025
@blesildaramirez
pkp/pkp-lib#10850 Add missing var name for border-color-transparent
2684788
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Feb 3, 2025
@blesildaramirez
pkp/pkp-lib#10850 Correct css var name for --text-sm-normal--font-weight
e5856c6
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Feb 11, 2025
@blesildaramirez
pkp/pkp-lib#10850 Add css variables based from config file
9766004
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Feb 11, 2025
@blesildaramirez
pkp/pkp-lib#10850 Add CSS Variables derived from Tailwind config
ccbb2cb
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Feb 11, 2025
@blesildaramirez
pkp/pkp-lib#10850 Rename css file for tailwind theme css variables
bb71759
blesildaramirez added a commit to blesildaramirez/ojs that referenced this issue Feb 11, 2025
@blesildaramirez
pkp/pkp-lib#10850 Import tw-theme-vars.css to ojs
33b7cf5
blesildaramirez added a commit to blesildaramirez/ojs that referenced this issue Feb 11, 2025
@blesildaramirez
pkp/pkp-lib#10850 Submodule updates ##blesildaramirez/i10850-tw##
22038e4
blesildaramirez added a commit to blesildaramirez/omp that referenced this issue Feb 11, 2025
@blesildaramirez
pkp/pkp-lib#10850 Import tw-theme-vars.css to ojs
6099982
blesildaramirez added a commit to blesildaramirez/omp that referenced this issue Feb 11, 2025
@blesildaramirez
pkp/pkp-lib#10850 Submodule updates ##blesildaramirez/i10850-tw3##
456b3ad
blesildaramirez added a commit to blesildaramirez/omp that referenced this issue Feb 11, 2025
@blesildaramirez
pkp/pkp-lib#10850 Import tw-theme-vars.css to omp
19e43ba
blesildaramirez added a commit to blesildaramirez/omp that referenced this issue Feb 11, 2025
@blesildaramirez
pkp/pkp-lib#10850 Submodule updates ##blesildaramirez/i10850-tw3##
bd5f63c
blesildaramirez added a commit to blesildaramirez/ops that referenced this issue Feb 11, 2025
@blesildaramirez
pkp/pkp-lib#10850 Import tw-theme-vars.css to ops
2038e56
blesildaramirez added a commit to blesildaramirez/ops that referenced this issue Feb 11, 2025
@blesildaramirez
pkp/pkp-lib#10850 Submodule updates ##blesildaramirez/i10850-tw3##
4f02915
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Feb 11, 2025
@blesildaramirez
pkp/pkp-lib#10850 Add tailwind.css for migration
779adaf
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Feb 11, 2025
@blesildaramirez
pkp/pkp-lib#10850 Migrate tailwind css from v3 to v4
dcb3e01
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Feb 11, 2025
@blesildaramirez
pkp/pkp-lib#10850 Fix error in @apply directive
356295e
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Feb 11, 2025
@blesildaramirez
pkp/pkp-lib#10850 Re-add tailwind.config.js file
2a4929b
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Feb 11, 2025
@blesildaramirez
pkp/pkp-lib#10850 Remove tailwind.config.js file
9b7e1f0
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Feb 11, 2025
@blesildaramirez
pkp/pkp-lib#10850 Remove reference of tailwind.config.js file in stor…
bfa3d23 
…y displays for color and fonts
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Feb 11, 2025
@blesildaramirez
pkp/pkp-lib#10850 Revert removed import in .storybook/preview.js
e745821
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Feb 11, 2025
@blesildaramirez
pkp/pkp-lib#10850 Fix referencing tailwind.css in global.less file
c23ab2b
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Feb 11, 2025
@blesildaramirez
pkp/pkp-lib#10850 Re-commit tailwindcss upgrade updates for package.json
1ca79e1
blesildaramirez added a commit to blesildaramirez/ojs that referenced this issue Feb 12, 2025
@blesildaramirez
pkp/pkp-lib#10850 Upgrade tailwind to v4
1b05f94
blesildaramirez added a commit to blesildaramirez/ojs that referenced this issue Feb 12, 2025
@blesildaramirez
pkp/pkp-lib#10850 Rename vite.config from js to mjs
4c1377b
blesildaramirez added a commit to blesildaramirez/ojs that referenced this issue Feb 12, 2025
@blesildaramirez
pkp/pkp-lib#10850 Import tailwind.css from ui-library through load.js…
34c5a96 
… file
blesildaramirez added a commit to blesildaramirez/ojs that referenced this issue Feb 12, 2025
@blesildaramirez
pkp/pkp-lib#10850 Submodule update ##blesildaramirez/i10850##
c4b69bb
@blesildaramirez blesildaramirez mentioned this issue Feb 12, 2025
Draft
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Feb 12, 2025
@blesildaramirez
pkp/pkp-lib#10850 Add tailwind.css for migration
30dc3c4
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Feb 12, 2025
@blesildaramirez
pkp/pkp-lib#10850 Remove redundant color theme in config before migra…
c0040d1 
…ting tailwind to v4
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Feb 12, 2025
@blesildaramirez
pkp/pkp-lib#10850 Rename tailwind.css file to tailwind.config.css file
1da3e2f
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Feb 12, 2025
@blesildaramirez
pkp/pkp-lib#10850 Migrate TailwindCSS from v3 to v4
cb30a6a
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Feb 12, 2025
@blesildaramirez
pkp/pkp-lib#10850 Fix error when using @apply directive
ca2631e
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Feb 12, 2025
@blesildaramirez
pkp/pkp-lib#10850 Remove reference of tailwind.config.js file in stor…
295b0a4 
…y displays for color and fonts
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Feb 12, 2025
@blesildaramirez
pkp/pkp-lib#10850 Fix error when using @apply direction to remaining …
e230412 
…components
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Feb 12, 2025
@blesildaramirez
pkp/pkp-lib#10850 Add comments for more info in tailwind.config.css file
1cff323
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Feb 12, 2025
@blesildaramirez
pkp/pkp-lib#10850 Remove duplicate css variables
f1e5214
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Feb 13, 2025
@blesildaramirez
pkp/pkp-lib#10850 Add comments to the tw-theme-vars css variables
8f9c7b0
blesildaramirez added a commit to blesildaramirez/ojs that referenced this issue Feb 13, 2025
@blesildaramirez
pkp/pkp-lib#10850 Upgrade tailwind to v4
0834316
blesildaramirez added a commit to blesildaramirez/ojs that referenced this issue Feb 13, 2025
@blesildaramirez
pkp/pkp-lib#10850 Rename vite.config from js to mjs
07c09b1
blesildaramirez added a commit to blesildaramirez/ojs that referenced this issue Feb 13, 2025
@blesildaramirez
pkp/pkp-lib#10850 Import tailwind.css from ui-library through load.js…
dea9d2c 
… file
blesildaramirez added a commit to blesildaramirez/ojs that referenced this issue Feb 13, 2025
@blesildaramirez
pkp/pkp-lib#10850 Rename tailwind config css import
2825411
blesildaramirez added a commit to blesildaramirez/ojs that referenced this issue Feb 13, 2025
@blesildaramirez
pkp/pkp-lib#10850 Submodule updates ##blesildaramirez/i10850-tw4##
6d50b65
blesildaramirez added a commit to pkp/ui-library that referenced this issue Feb 20, 2025
@blesildaramirez
pkp/pkp-lib#10850 Add CSS Variables derived from Tailwind V3 config (#…
6b0ef16 
…523)

* pkp/pkp-lib#10850 Add css variables based from config file

* pkp/pkp-lib#10850 Add CSS Variables derived from Tailwind config

* pkp/pkp-lib#10850 Rename css file for tailwind theme css variables

* pkp/pkp-lib#10850 Remove duplicate css variables

* pkp/pkp-lib#10850 Add comments to the tw-theme-vars css variables
blesildaramirez added a commit to blesildaramirez/ojs that referenced this issue Feb 20, 2025
@blesildaramirez
pkp/pkp-lib#10850 Import tw-theme-vars.css to ojs
db4415b
blesildaramirez added a commit to pkp/ojs that referenced this issue Feb 20, 2025
@blesildaramirez
Merge pull request #4654 from blesildaramirez/i10850-tw
6a76939 
pkp/pkp-lib#10850 Add CSS Variables derived from Tailwind V3 config
blesildaramirez added a commit to blesildaramirez/omp that referenced this issue Feb 20, 2025
@blesildaramirez
pkp/pkp-lib#10850 Import tw-theme-vars.css to omp
fcceaa5
blesildaramirez added a commit to pkp/omp that referenced this issue Feb 20, 2025
@blesildaramirez
Merge pull request #1836 from blesildaramirez/i10850-tw3
6f4d481 
pkp/pkp-lib#10850 Add CSS Variables derived from Tailwind V3 config
blesildaramirez added a commit to blesildaramirez/ops that referenced this issue Feb 20, 2025
@blesildaramirez
pkp/pkp-lib#10850 Import tw-theme-vars.css to ops
6bab76b
blesildaramirez added a commit to pkp/ops that referenced this issue Feb 20, 2025
@blesildaramirez
Merge pull request #872 from blesildaramirez/i10850-tw3
d045dbe 
pkp/pkp-lib#10850 Add CSS Variables derived from Tailwind V3 config
@blesildaramirez
Copy link
Contributor Author

blesildaramirez commented Feb 24, 2025 •
edited
Loading

Closing this issue due to compatibility concerns with older browsers, which do not fully support Tailwind CSS v4: Tailwind v4 not working with Safari 15
Safari 15 was released 2021, just 4 yrs ago as of writing. For reference of the browser versions we'd like to support for 3.5, please refer to this issue: #9368

Browser Compatibility Table for Tailwind CSS v4 Upgrade

Browser PKP 3.5 LTS Target Version Browser Release Date @layer Support Version @layer Support Release Date Tailwind v4 Target Version Browser Release Date
Chrome 69 January 24, 2018 99 March 1, 2022 111 March 7, 2023
Edge 79 January 15, 2020 99 March 1, 2022 111 March 7, 2023
Firefox 67 May 21, 2019 97 February 8, 2022 128 July 9, 2024
Safari 12 September 17, 2018 15.4 March 8, 2022 16.4 March 27, 2023

Note: Tailwind CSS v4 requires modern browser versions that support @layer. Older browsers, such as Safari 12, may not be fully compatible.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@blesildaramirez blesildaramirez

Labels
Accessibility Any issue that impacts assistive technology or users with visual or physical impairments.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@blesildaramirez