https://github.com/roonie007/fresh-tailwindcss

A Deno Fresh plugin for TailwindCSS
https://github.com/roonie007/fresh-tailwindcss

Last synced: about 2 months ago
JSON representation

A Deno Fresh plugin for TailwindCSS

• Host: GitHub
• URL: https://github.com/roonie007/fresh-tailwindcss
• Owner: roonie007
• License: mit
• Created: 2023-06-29T03:57:08.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2023-06-30T02:13:46.000Z (about 1 year ago)
• Last Synced: 2024-06-22T18:02:48.524Z (3 months ago)
• Language: TypeScript
• Size: 15.6 KB
• Stars: 8
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Fresh TailwindCSS

A Deno Fresh plugin for [TailwindCSS](https://tailwindcss.com/).

> **Note:** This plugin is still in development and is not yet ready for production use.

> **Note:** This plugin supports only some basic TailwindCSS configuration.

## How it works

Without question, one of the key advantage of utilizing Deno and Fresh lies in their sheer simplicity: no BUILD STEP is required. Simply execute the application and watch it operate as intended. Yet, the introduction of TailwindCSS presents a unique hurdle as it mandates a build step.

To overcome this impediment, this plugin takes advantage of the TailwindCSS CLI to efficiently construct your CSS.

In a **production** mode, the CSS is constructed and cached the very first time a page is loaded by any user. From then on, subsequent page visits will seamlessly leverage the cached CSS, ensuring quick loading times.

Meanwhile, in a **development** mode, the plugin rebuilds your CSS during every page load. This guarantees the most recent styles changes.

## Usage

In your `main.ts` file, import the plugin and add it to the `plugins` array.

```ts

import tailwindPlugin from "https://deno.land/x/fresh_tailwindcss/mod.ts";

import tailwindConfig from "./tailwind.config.ts"; // Your tailwind config

await start(manifest, {

  plugins: [

    tailwindPlugin({

      mode: "development", // or 'production'

      input: "./style.css", // Relative path to the running script

      verbose: false,

      tailwindConfig,

    }),

  ],

});

```

Your `tailwind.config.js` file should export a valid TailwindCSS configuration object. For more information, see the [TailwindCSS documentation](https://tailwindcss.com/docs/configuration).

```ts

export default {

  content: [

    "./components/**/*.{js,ts,jsx,tsx,mdx}",

    "./islands/**/*.{js,ts,jsx,tsx,mdx}",

    "./routes/**/*.{js,ts,jsx,tsx,mdx}",

  ],

};

```

Your `style.css` file should import TailwindCSS.

```css

@tailwind base;

@tailwind components;

@tailwind utilities;

```

## License

[MIT](./LICENSE)