Zuby.js tailwind plugin
The plugin for Zuby.js that offers seamless integration with Tailwind CSS
for your application.
First, install the @zubyjs/tailwind package using your favorite package manager.
If you aren't sure, you can use npm:
``sh`
npm install @zubyjs/tailwind
Then add the @zubyjs/tailwind plugin to your zuby.config.mjs file under the plugins option:
`diff lang="js" title="zuby.config.mjs"
import { defineConfig } from 'zuby';
import preact from '@zubyjs/preact';
+ import tailwind from '@zubyjs/tailwind';
export default defineConfig({
outDir: '.zuby',
jsx: preact(),
+ plugins: [
+ tailwind()
+ ]
^^^^^^^^
});
`
The plugin will add the Tailwind CSS to your application and create the tailwind.config.mjs file during the build if it doesn't exist yet.
You just need to add below basic Tailwind CSS to your main CSS file:
`css title="src/index.css"`
@tailwind base;
@tailwind components;
@tailwind utilities;
And that's it! You are ready to use Tailwind CSS in your application.
NOTE: Always make sure that all zuby packages are in sync in your package.json file:
`diff lang="json"``
{
"name": "my-zuby-app",
"version": "1.0.0",
"dependencies": {
"zuby": "latest",
"@zubyjs/tailwind": "latest"
}
}
This package is part of Zuby.js workspace and maintained by the team behind the Zuby package.
Please refer to it for more details how to contribute.
MIT