jjranalli/nightwind

text-slate-xxx & bg-slate-xxx does not work out of the box?

Opened this issue · 0 comments

addlistener commented

❌ bg-slate-600
❌ text-slate-100
✅ text-black

I read the manual that if there's a preset, color weights inverting would be skipped. But this is a bare bones project so there's no way to find a preset I guess?

Have I been configuring improperly?

Or is there a way I can work around it?

image image

The config is dead simple

import { type Config } from "tailwindcss";

export default {
  content: ["./src/**/*.tsx"],
  darkMode: "class",
  theme: {
    // extend: {
    //   fontFamily: {
    //     sans: ["var(--font-sans)", ...fontFamily.sans],
    //   },
    // },
  },
  plugins: [
    require("nightwind"),
  ],
} satisfies Config;

The versions

{
  "type": "module",
  "scripts": {
    "build": "next build",
    "db:push": "prisma db push",
    "db:studio": "prisma studio",
    "dev": "next dev",
    "postinstall": "prisma generate",
    "lint": "next lint",
    "start": "next start"
  },
  "dependencies": {
    "@grapesjs/react": "^1.0.0",
    "@next-auth/prisma-adapter": "^1.0.7",
    "@prisma/client": "^5.6.0",
    "@t3-oss/env-nextjs": "^0.7.1",
    "@tanstack/react-query": "^4.36.1",
    "@trpc/client": "^10.43.6",
    "@trpc/next": "^10.43.6",
    "@trpc/react-query": "^10.43.6",
    "@trpc/server": "^10.43.6",
    "next": "^14.0.3",
    "next-auth": "^4.24.5",
    "nightwind": "^1.1.13",
    "nodemailer": "^6.9.7",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-icons": "^4.12.0",
    "superjson": "^2.2.1",
    "zod": "^3.22.4"
  },
  "devDependencies": {
    "@next/eslint-plugin-next": "^14.0.3",
    "@types/eslint": "^8.44.7",
    "@types/node": "^18.17.0",
    "@types/react": "^18.2.37",
    "@types/react-dom": "^18.2.15",
    "@typescript-eslint/eslint-plugin": "^6.11.0",
    "@typescript-eslint/parser": "^6.11.0",
    "autoprefixer": "^10.4.14",
    "eslint": "^8.54.0",
    "postcss": "^8.4.31",
    "prettier": "^3.1.0",
    "prettier-plugin-tailwindcss": "^0.5.7",
    "prisma": "^5.6.0",
    "tailwindcss": "^3.3.5",
    "typescript": "^5.1.6"
  },
  "ct3aMetadata": {
    "initVersion": "7.24.1"
  },
  "packageManager": "yarn@1.22.21"
}

This is how I called init()

// in _app.tsx
import nightwind from "nightwind/helper";
const MyApp: AppType<{ session: Session | null }> = ({
  Component,
  pageProps: { session, ...pageProps },
}) => {
  return (
    <>
      <Head>
        ...
        <script dangerouslySetInnerHTML={{__html: nightwind.init()}}/>
      </Head>
      ...
    </>
  );
};