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

Open
blesildaramirez opened this issue Jan 27, 2025 · 0 comments
Open

Upgrade Tailwind CSS to v4 #10850

blesildaramirez opened this issue Jan 27, 2025 · 0 comments
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
ojs: pkp/ojs#4654
omp: pkp/omp#1836
ops: pkp/ops#872

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
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