What are V4's plans for plugins?

[devlzcode]

From a previous post Adam said the JS API uses a slow-path which leads to me to believe that the expected future for tailwind plugins are CSS files. Is this true or is the "Modern API" built with JS plugins in mind? How do I go about porting an animation library like tailwind-motion?

EDIT: How do we use arbitrary values using CSS plugin API?

[daniel598lopez]

Hello,
The "Modern API" of Tailwind CSS is indeed built with JavaScript plugins in mind. While the JS API might have performance considerations, the future of Tailwind plugins is expected to leverage CSS files for better performance and maintainability. FLVS

To port an animation library like tailwind-motion, you can create a Tailwind plugin and integrate it into your tailwind.config.js. Here's a basic example:

javascript
const plugin = require('tailwindcss/plugin');

module.exports = {
plugins: [
plugin(function({ addUtilities }) {
addUtilities({
'.motion-spin': { animation: 'spin 1s linear infinite' },
// Add more animations here
});
})
]
};
For using arbitrary values with the CSS plugin API, you can leverage Tailwind's arbitrary value feature. Here's an example:

html

This will generate CSS classes with custom values.

Best Regards,
Daniel Lopez