Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[ FEATURE ] Add this fix to the docs. It's needed when used in a monorepo with tailwind, nativewind and typescript to get it to work #329

Open
Francowerner opened this issue Jan 29, 2025 · 0 comments
Labels
enhancement New feature or request

Comments

@Francowerner
Copy link

Francowerner commented Jan 29, 2025

If you are using this with create-t3-turbo or in a monorepo setup it wont work out of the box and it'll break nativewind.

Describe the solution you'd like
Add to the docs that this library generates a tailwind.config.js file when you use the init command, and create-t3-turbo utilizes a tailwind.config.ts, so u have to copy and paste all of the relevant config from the .js file to the .ts in order to get nativewind and this library's component to work.

This is my tailwind.config.ts file:
`import type { Config } from "tailwindcss";
// @ts-expect-error - no types
import nativewind from "nativewind/preset";
import { hairlineWidth } from 'nativewind/theme'

import baseConfig from "@acme/tailwind-config/native";

export default {
darkMode: 'class',
content: ["./src//*.{ts,tsx}", './components//*.{ts,tsx}'],
presets: [baseConfig, nativewind],
theme: {
extend: {
colors: {
border: 'hsl(var(--border))',
input: 'hsl(var(--input))',
ring: 'hsl(var(--ring))',
background: 'hsl(var(--background))',
foreground: 'hsl(var(--foreground))',
primary: {
DEFAULT: 'hsl(var(--primary))',
foreground: 'hsl(var(--primary-foreground))',
},
secondary: {
DEFAULT: 'hsl(var(--secondary))',
foreground: 'hsl(var(--secondary-foreground))',
},
destructive: {
DEFAULT: 'hsl(var(--destructive))',
foreground: 'hsl(var(--destructive-foreground))',
},
muted: {
DEFAULT: 'hsl(var(--muted))',
foreground: 'hsl(var(--muted-foreground))',
},
accent: {
DEFAULT: 'hsl(var(--accent))',
foreground: 'hsl(var(--accent-foreground))',
},
popover: {
DEFAULT: 'hsl(var(--popover))',
foreground: 'hsl(var(--popover-foreground))',
},
card: {
DEFAULT: 'hsl(var(--card))',
foreground: 'hsl(var(--card-foreground))',
},
},
borderWidth: {
hairline: hairlineWidth(),
},
keyframes: {
'accordion-down': {
from: { height: '0' },
to: { height: 'var(--radix-accordion-content-height)' },
},
'accordion-up': {
from: { height: 'var(--radix-accordion-content-height)' },
to: { height: '0' },
},
},
animation: {
'accordion-down': 'accordion-down 0.2s ease-out',
'accordion-up': 'accordion-up 0.2s ease-out',
},
},
},
plugins: [require('tailwindcss-animate')],
} satisfies Config;`
Cheers

@Francowerner Francowerner added the enhancement New feature or request label Jan 29, 2025
@Francowerner Francowerner changed the title [ FEATURE ] [ FEATURE ] Add fix needed with monorepo, tailwind and typescript to get this to work Jan 29, 2025
@Francowerner Francowerner changed the title [ FEATURE ] Add fix needed with monorepo, tailwind and typescript to get this to work [ FEATURE ] Add to the docs this fix needed when used in a monorepo with tailwind, nativewind and typescript to get this to work Jan 29, 2025
@Francowerner Francowerner changed the title [ FEATURE ] Add to the docs this fix needed when used in a monorepo with tailwind, nativewind and typescript to get this to work [ FEATURE ] Add this fix to the docs. It's needed when used in a monorepo with tailwind, nativewind and typescript to get this to work Jan 29, 2025
@Francowerner Francowerner changed the title [ FEATURE ] Add this fix to the docs. It's needed when used in a monorepo with tailwind, nativewind and typescript to get this to work [ FEATURE ] Add this fix to the docs. It's needed when used in a monorepo with tailwind, nativewind and typescript to get it to work Jan 29, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

1 participant