An Interest In:
Web News this Week
- March 21, 2024
- March 20, 2024
- March 19, 2024
- March 18, 2024
- March 17, 2024
- March 16, 2024
- March 15, 2024
December 14, 2021 10:51 am GMT
Original Link: https://dev.to/thomasvanholder/how-to-upgrade-tailwind-2-to-tailwind-3-2a3c
How to upgrade Tailwind 2 to Tailwind 3
In package.json file, verify your current installed tailwind version. Find tailwind's complete upgrade guide, including all minor changes here.
This tutorial has as starting point:
- Tailwind 2.2.16
- Upgrade tailwind
- Upgrade typography package
- Upgrade forms package
- Upgrade autoprefixer package
- Upgrade postcss package
- Remove aspect-ratio package
- Replace purge option with content
- Remove dark mode config
1. Upgrade tailwind
yarn upgrade tailwindcss --latest
2. Upgrade typography package
yarn upgrade @tailwindcss/typography --latest
3. Upgrade forms package
yarn upgrade @tailwindcss/forms --latest
4. Upgrade autoprefixer package
yarn upgrade autoprefixer --latest
5. Upgrade postcss package
yarn upgrade postcss --latest
6. Remove aspect-ratio package
Tailwind 3 comes with native aspect-ratio (7:42). This implies that the package.json can be slimmed down by removing the aspect ratio package if you had it installed.
yarn remove @tailwindcss/aspect-ratio
In the tailwind.config.js file, remove aspect-ratio from the plugins.
require('@tailwindcss/aspect-ratio'),
- Search your codebase for the usage of legacy aspect ratio.
- Replace with the new aspect ratio attributes.
7. Replace purge option with content
If after compiling the CSS, you see the warning message:The "purge"/"content" options have changed in Tailwind CSS v3.0.
Replace the purge
option in tailwind.config.js with content
as mentioned here.
// oldmodule.exports = { purge: [...] ...}//newmodule.exports = { content: [...] ...}
8. Remove dark mode config
In the tailwind.config.js file, remove the dark mode setting if it's value is set to false.
// oldmodule.exports = { darkMode: false, ...}//newmodule.exports = { ...}
Original Link: https://dev.to/thomasvanholder/how-to-upgrade-tailwind-2-to-tailwind-3-2a3c
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To