[Bug]: Styles not applied in a remix.run app?

[Jarrodsz]

Tremor Version

latest

Link to minimal reproduction

none

Steps to reproduce

Using the cli to install

What is expected?

Creating a dashboard route

import * as React from "react"
import { Grid, Col, Card, Text, Metric } from "@tremor/react";

export default function PageRoute() {

    // const [isOpen, setIsOpen] = React.useState(true);
    // const toggleSidebar = () => setIsOpen(!isOpen);

    return (

        <>
            xx

            <Grid numItems={1} numItemsSm={2} numItemsLg={3} className="gap-2">
                <Col numColSpan={1} numColSpanLg={2}>
                    <Card>
                        <Text>Title</Text>
                        <Metric>KPI 1</Metric>
                    </Card>
                </Col>
                <Card>
                    <Text>Title</Text>
                    <Metric>KPI 2</Metric>
                </Card>
                <Col>
                    <Card>
                        <Text>Title</Text>
                        <Metric>KPI 3</Metric>
                    </Card>
                </Col>
                <Card>
                    <Text>Title</Text>
                    <Metric>KPI 4</Metric>
                </Card>
                <Card>
                    <Text>Title</Text>
                    <Metric>KPI 5</Metric>
                </Card>
            </Grid>

        </>

    );
}

What is actually happening?

Expected to see the rendered layout but no styles are applied.

What browsers are you seeing the problem on?

No response

Any additional comments?

Do i have to server side bundle the package tremor in remix config?

[Jarrodsz]

even with

serverDependenciesToBundle: [      
        "@tremor/*"
    ],```

it does not seem to load the styles

[tomaspozo]

How is your tailwind config? Are other tailwind styles applying normally? If not, check your tailwind config and your globals.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

[Jarrodsz]

How is your tailwind config? Are other tailwind styles applying normally? If not, check your tailwind config and your globals.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

I have exactly this these lines are in tailwind.css not in a seperate global.css in a remix project still the styles are not loaded somehow ;(

i use remix v2 with cjs format not esm

[Jarrodsz]

tailwind.config.ts is

/* eslint-disable no-undef */
/* eslint-disable @typescript-eslint/no-var-requires */
const colors = require("tailwindcss/colors");

const themeColor = colors.indigo;
const accentColor = colors.gray;

/**
 * @type {import('tailwindcss').Config}
 */
export default {
    content: [
        "./app/**/*.{js,ts,jsx,tsx}",
        "components/**/*.{ts,tsx}",
    ],
    darkMode: "class",
    theme: {
        transparent: "transparent",
        current: "currentColor",
        extend: {
            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",
            },
            colors: {
                ...colors,
                transparent: "transparent",
                current: "currentColor",
                indigo: colors.indigo,
                blue: colors.blue,
                red: colors.red,
                orange: colors.orange,
                yellow: colors.yellow,
                green: colors.green,
                teal: colors.teal,
                purple: colors.purple,
                pink: colors.pink,
                slate: colors.slate,
                gray: colors.gray,
                neutral: colors.neutral,
                stone: colors.stone,
                amber: colors.amber,
                lime: colors.lime,
                emerald: colors.emerald,
                cyan: colors.cyan,
                sky: colors.sky,
                violet: colors.violet,
                fuchsia: colors.fuchsia,
                rose: colors.rose,
                theme: {
                    50: themeColor[50],
                    100: themeColor[100],
                    200: themeColor[200],
                    300: themeColor[300],
                    400: themeColor[400],
                    500: themeColor[500],
                    600: themeColor[600],
                    700: themeColor[700],
                    800: themeColor[800],
                    900: themeColor[900],
                },
                accent: {
                    50: accentColor[50],
                    100: accentColor[100],
                    200: accentColor[200],
                    300: accentColor[300],
                    400: accentColor[400],
                    500: accentColor[500],
                    600: accentColor[600],
                    700: accentColor[700],
                    800: accentColor[800],
                    900: accentColor[900],
                },
                tremor: {
                    brand: {
                        faint: "#eff6ff", // blue-50
                        muted: "#bfdbfe", // blue-200
                        subtle: "#60a5fa", // blue-400
                        DEFAULT: "#3b82f6", // blue-500
                        emphasis: "#1d4ed8", // blue-700
                        inverted: "#ffffff", // white
                    },
                    background: {
                        muted: "#f9fafb", // gray-50
                        subtle: "#f3f4f6", // gray-100
                        DEFAULT: "#ffffff", // white
                        emphasis: "#374151", // gray-700
                    },
                    border: {
                        DEFAULT: "#e5e7eb", // gray-200
                    },
                    ring: {
                        DEFAULT: "#e5e7eb", // gray-200
                    },
                    content: {
                        subtle: "#9ca3af", // gray-400
                        DEFAULT: "#6b7280", // gray-500
                        emphasis: "#374151", // gray-700
                        strong: "#111827", // gray-900
                        inverted: "#ffffff", // white
                    },
                },
                // dark mode
                "dark-tremor": {
                    brand: {
                        faint: "#0B1229", // custom
                        muted: "#172554", // blue-950
                        subtle: "#1e40af", // blue-800
                        DEFAULT: "#3b82f6", // blue-500
                        emphasis: "#60a5fa", // blue-400
                        inverted: "#030712", // gray-950
                    },
                    background: {
                        muted: "#131A2B", // custom
                        subtle: "#1f2937", // gray-800
                        DEFAULT: "#111827", // gray-900
                        emphasis: "#d1d5db", // gray-300
                    },
                    border: {
                        DEFAULT: "#1f2937", // gray-800
                    },
                    ring: {
                        DEFAULT: "#1f2937", // gray-800
                    },
                    content: {
                        subtle: "#4b5563", // gray-600
                        DEFAULT: "#6b7280", // gray-500
                        emphasis: "#e5e7eb", // gray-200
                        strong: "#f9fafb", // gray-50
                        inverted: "#000000", // black
                    },
                },
                boxShadow: {
                    // light
                    "tremor-input": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
                    "tremor-card": "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
                    "tremor-dropdown": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
                    // dark
                    "dark-tremor-input": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
                    "dark-tremor-card": "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
                    "dark-tremor-dropdown": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
                },
                borderRadius: {
                    "tremor-small": "0.375rem",
                    "tremor-default": "0.5rem",
                    "tremor-full": "9999px",
                },
                fontSize: {
                    "tremor-label": ["0.75rem"],
                    "tremor-default": ["0.875rem", { lineHeight: "1.25rem" }],
                    "tremor-title": ["1.125rem", { lineHeight: "1.75rem" }],
                    "tremor-metric": ["1.875rem", { lineHeight: "2.25rem" }],
                },
            },
        },
    },
    safelist: [
        {
            pattern:
                /^(bg-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
            variants: ["hover", "ui-selected"],
        },
        {
            pattern:
                /^(text-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
            variants: ["hover", "ui-selected"],
        },
        {
            pattern:
                /^(border-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
            variants: ["hover", "ui-selected"],
        },
        {
            pattern:
                /^(ring-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
        },
        {
            pattern:
                /^(stroke-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
        },
        {
            pattern:
                /^(fill-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
        },
    ],
    plugins: [
        require("@tailwindcss/forms"),
        require("@tailwindcss/typography"),
        require("tailwindcss-animate"),
        require("@tailwindcss/aspect-ratio"),
        require("@headlessui/tailwindcss"),
    ],

};

still unable to resolve this issue

[Jarrodsz]

[

](url) so it renders like this no styling applied

[Jarrodsz]

adding the css manually to root.tsx also fails

import styles from "./assets/tailwind.css";
import tremor from "@tremor/react/dist/tremor.css";
import favicon from './favicon.png'

export const links: LinksFunction = () => {
    return [
        {
            rel: 'icon',
            href: favicon,
            type: 'image/png',
        },
        {rel: 'stylesheet', href: styles},
        {rel: 'stylesheet', href: tremor},

    ]
}
``` there is no .css in the tremor.so bundle.

most frustrating setup ever I hope someone has a resolution :(

[severinlandolt]

Hi! I started with Remix's installation npx create-remix@latest my-project, then followed tailwinds installation guide, and lastly installed tremor, added the tremor config to the tailwind config and then it works.

I think your issue is not related to Tremor directly but to your specific project setup.

Please make sure to follow the installation guides precisely and to include the path to the Tremor module in your tailwind config:

 content: [
    './app/**/*.{js,jsx,ts,tsx}',
+   "./node_modules/@tremor/**/*.{js,ts,jsx,tsx}",
],

[Hahlh]

For anybody struggling with similar behavior:

In my case it turned out that the tremor init script (using Gatsby & maybe my mistake) set up the path for the Tailwind CSS purging incorrectly.

Best double check that the path to tremor in content is correct.

Previous:

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "../node_modules/@tremor/**/*.{js,ts,jsx,tsx}",
  ],
  ...
  }

Working:

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./node_modules/@tremor/**/*.{js,ts,jsx,tsx}",
  ],
  ...
  }

[severinlandolt]

@Hahlh Persky bug, hard to spot! Thank you for sharing🙏