D
Deno

help

Deno Fresh Twind Colors

Kkj7olg10/12/2023
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
Twind
The smallest, fastest, most feature complete tailwind-in-js solution in existence
DAHDeno AI Helper10/12/2023
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. 🦕
NNeTT10/12/2023
could you share this in #resources instead? people can find it easily that way
Kkj7olg10/12/2023
I couldn't find that channel easily before, I would have looked there too 🙂

Looking for more? Join the community!