kj7olg•10mo ago

Deno Fresh Twind Colors

Just a message to anyone using Deno Fresh and wondering why their tailwindcss colors aren't working- Twind requires a separate package for additional colors to be configured in the configuration. https://twind.dev/handbook/configuration.html#theme

Twind

The smallest, fastest, most feature complete tailwind-in-js solution in existence

3 Replies

Deno AI Helper•10mo ago

The documentation does not provide specific information about configuring additional colors with Twind in a Deno Fresh project. However, it does provide a basic example of setting up Twind with a custom theme in Deno. In this example, the theme's fontFamily is customized, but it doesn't mention color customization. Here's the example from the documentation:

import { setup, tw } from "https://esm.sh/twind@0.16.16";
import { getStyleTag, virtualSheet } from "https://esm.sh/twind@0.16.16/sheets";

const sheet = virtualSheet();

setup({
  theme: {
    fontFamily: {
      sans: ["Helvetica", "sans-serif"],
      serif: ["Times", "serif"],
    },
  },
  sheet,
});

import { setup, tw } from "https://esm.sh/twind@0.16.16";
import { getStyleTag, virtualSheet } from "https://esm.sh/twind@0.16.16/sheets";

const sheet = virtualSheet();

setup({
  theme: {
    fontFamily: {
      sans: ["Helvetica", "sans-serif"],
      serif: ["Times", "serif"],
    },
  },
  sheet,
});

In this example, the setup function from Twind is used to configure the theme. The theme object is where you would typically define your custom colors when using Tailwind CSS. However, the documentation does not provide a specific example of this. If you want to customize colors, you might be able to follow the same pattern and add a colors property to the theme object, but this isn't explicitly supported by the documentation. You should refer to the Twind documentation for more details on how to do this. Remember to always test your code thoroughly when you're configuring it based on assumptions or external resources, as the behavior might not be exactly as expected. 🦕

Helpful Links: Using Twind | Manual | Deno Fresh 1.1 - automatic JSX, plugins, DevTools, and more Using Twind v1 | Fresh docs Fresh 1.2 – welcoming a full-time maintainer, sharing state between islands, limited npm support, and more

NeTT•10mo ago

could you share this in #resources instead? people can find it easily that way

kj7olg•10mo ago

I couldn't find that channel easily before, I would have looked there too 🙂