Windi CSSMigrate from Tailwind CSS
Packages
Some of your dependencies are no longer required. You can remove them from your package.json if they were only needed for Tailwind CSS.
package.json
- "tailwindcss": "*",
- "postcss": "*",
- "autoprefixer": "*",
+ "windicss": "*"
Base Styles
You can now remove the Tailwind CSS imports from your CSS entry.
- @import 'tailwindcss/base';
- @import 'tailwindcss/components';
- @import 'tailwindcss/utilities';
(Optional) Based on the integration tools you are using, you might need to import the virtual:windi.css entry explicitly. Please check the docs of the tools for more details.
main.js
import 'virtual:windi.css'
Configurations
Since all variants are automatically enabled, variant and purge fields are no longer needed.
colors and plugins need to be imported from windicss instead.
We are compatible with both windi.config.js and tailwind.config.js.
windi.config.js
-const colors = require('tailwindcss/colors')
+const colors = require('windicss/colors')
-const typography = require('@tailwindcss/typography')
+const typography = require('windicss/plugin/typography')
export default {
- purge: {
- content: [
- './**/*.html',
- ],
- options: {
- safelist: ['prose', 'prose-sm', 'm-auto'],
- },
- },
- variants: {
- extend: {
- cursor: ['disabled'],
- }
- },
+ extract: {
+ include: ['./**/*.html'],
+ },
+ safelist: ['prose', 'prose-sm', 'm-auto'],
darkMode: 'class',
plugins: [typography],
theme: {
extend: {
colors: {
teal: colors.teal,
},
}
},
}
Cleanup (optional)
The following files can be removed if you don't use their other features.
- postcss.config.js