@zubyjs/tailwind

The plugin for Zuby.js that offers seamless integration with Tailwind CSS for your application.

Installation

First, install the @zubyjs/tailwind package using your favorite package manager. If you aren't sure, you can use npm:

npm install @zubyjs/tailwind

Then add the @zubyjs/tailwind plugin to your zuby.config.mjs file under the plugins option:

  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:

@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:

  {
    "name": "my-zuby-app",
    "version": "1.0.0",
    "dependencies": {
      "zuby": "latest",
      "@zubyjs/tailwind": "latest"
    }
  }

Contributing

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.

License

MIT