Updating to Tailwind CSS v3

Understanding Updates

Always review the Tailwind CSS changelog before updating to understand new changes.

Prerequisites

• Node.js: Ensure Node.js v16+ is installed (check with node -v).

How to Update

1. Install Tailwind CSS: Run npm install [email protected] in your theme's directory. Replace @1.3 with a specific version for precise control.
2. Upgrade PostCSS (Optional): If you're not already using postcss-preset-env, follow these steps:
   • Uninstall Autoprefixer: Run npm uninstall autoprefixer.
   • Install postcss-preset-env: Run npm install postcss-preset-env.
   • Update postcss.config.js:
     • Remove require('autoprefixer'),
     • Add require('postcss-preset-env'), after require('tailwindcss'),
   • Add browserslist config: In your package.json, add:
     "browserslist": [
         "last 3 version",
         "> 0.5%",
         "not dead",
         "not op_mini all"
     ]
     

     For more information, refer to the using browserlist docs.
3. Update Optional Plugins (Optional): Update optional plugins (e.g., @tailwindcss/forms, @tailwindcss/typography) using:
   npm install @tailwindcss/forms@latest
   npm install @tailwindcss/typography@latest
   

   Important: Although these plugins are less likely to introduce new CSS properties, always review their changelogs before updating.

Updating the Configuration

Configuration updates may be required in these situations:

Adding tailwind.config.js merging

To enable tailwind.config.js merging (introduced in Hyvä 1.1.14), refer to the dedicated documentation on Module tailwind.config.js merging.

Update with Default Theme Configuration

New Hyvä versions may require specific tailwind.config.js changes (adding, replacing, or removing entries).

Look for sections titled New tailwind.config.js entry within the upgrade documentation (as seen in the 1.3.0 upgrading to).