haitam Posts - Answer Overflow

haitam

•Created by haitam on 1/11/2024 in #questions

what is the correct way to use prefix in tailwindcss

i'm working on a plugin for a certain application, that allows for custom css and whatever. i'm trying to isolate all my css from the other plugins, for isolation purposes i tried using the prefix in the config, but imo it makes it unreadable.

<div className="plug-tg-flex plug-tg-flex-col plug-tg-gap-2">

<div className="plug-tg-flex plug-tg-flex-col plug-tg-gap-2">

But it looks ugly and unreadable

i was thinking of making my own little function that sits in between classname and my actual css like clsx so it will identify tailwindcss classes and adds the prefix to it and it will look like this

<div className={csx("flex flex-col gap-2")>

<div className={csx("flex flex-col gap-2")>

the function is in the utils and have access to the tailwind config and prefix

ok now the problems... 1- I don't have a function that is exposed from the tailwind library that allows me to identify tailwind classes (not sure) 2- tailwind wont recognize the classes and build them because it doesn't find ex plug-tg-flex it found flex (maybe there is a hack for it? idk) PORS: - you don't have to change your entire codebase just to change the prefix - readable code CONS: - every classname will need to be wrapped in the csx function, for consistancy

4 replies

TTCTheo's Typesafe Cult

•Created by haitam on 12/27/2023 in #questions

next auth v5 i'm getting a `invalid_grant`

when i use google provider here's my auth code

export const providers: Provider[] = [
  GoogleProvider({
    clientId: process.env.AUTH_GOOGLE_ID || "",
    clientSecret: process.env.AUTH_GOOGLE_SECRET || "",
    checks: ["none"],
  }),
  {
    id: "email",
    type: "email",
    name: "Email",
    sendVerificationRequest: async ({ identifier: email, url }: any) => {
      // const siteSettings = await getSiteConfig();
      const { host } = new URL(url);
      // @ts-ignore
      await sendMailApi({
        html: html({ email, url }),
        subject: `Sign in to ${host}`,
        text: text({ email, url }),
        to: email,
      });
    },
  } as any,
];

export const authOptions: NextAuthConfig = {
  // @ts-ignore
  adapter: PrismaAdapter(prisma),
  callbacks: {
    session: async ({ session, user }) => {
      if (session.user) {
        session.user = user;
        session.user.userId = user.id;
        session.user.stripeId = user.stripeId;
      }

      return session;
    },
  },
  // debug: !(process.env.NODE_ENV === "production"),
  providers,
  secret: process.env.NEXTAUTH_SECRET,
  session: {
    strategy: "jwt",
    maxAge: 24 * 3600,
  },
  // pages: {
  //   signIn: "/auth/login",
  // },
};

export const providers: Provider[] = [
  GoogleProvider({
    clientId: process.env.AUTH_GOOGLE_ID || "",
    clientSecret: process.env.AUTH_GOOGLE_SECRET || "",
    checks: ["none"],
  }),
  {
    id: "email",
    type: "email",
    name: "Email",
    sendVerificationRequest: async ({ identifier: email, url }: any) => {
      // const siteSettings = await getSiteConfig();
      const { host } = new URL(url);
      // @ts-ignore
      await sendMailApi({
        html: html({ email, url }),
        subject: `Sign in to ${host}`,
        text: text({ email, url }),
        to: email,
      });
    },
  } as any,
];

export const authOptions: NextAuthConfig = {
  // @ts-ignore
  adapter: PrismaAdapter(prisma),
  callbacks: {
    session: async ({ session, user }) => {
      if (session.user) {
        session.user = user;
        session.user.userId = user.id;
        session.user.stripeId = user.stripeId;
      }

      return session;
    },
  },
  // debug: !(process.env.NODE_ENV === "production"),
  providers,
  secret: process.env.NEXTAUTH_SECRET,
  session: {
    strategy: "jwt",
    maxAge: 24 * 3600,
  },
  // pages: {
  //   signIn: "/auth/login",
  // },
};

3 replies

TTCTheo's Typesafe Cult

•Created by haitam on 7/29/2023 in #questions

stop using prefix with tailwindcss

Yes, just DO NOT USE PREFIX WITH TAILWIND, unless you have a really good reason to it makes your components not useable, for people who just want to use them. or if you want to make it a component and use it in another project, it will add unnecessary extra steps. i found out that some people use prefix, from the nextra project i was trying to import it to be used in app directory with some special tools, and i had to fork the entire project and theme just to change that nx- prefix it was devastating, and no, i'm not gonna use their prefix, because i also have my components that doesn't use it, so i just decided to fix their issue at last I made it all work. The point is reusability and ease of forking.

3 replies

TTCTheo's Typesafe Cult

•Created by haitam on 5/12/2023 in #questions

How do you self host your projects in a vps

without relying on any cpanel or vercel, i have a vps and i usually move the project using git and run yarn build then yarn start i also sat up a systemd service that handles keeping that website running so my process of upgrading the site would be to ssh into it and then run yarn build but after some testing, i found out that while the build is running, i can't access the website, and or if the build fails the website breaks. i saw something in the vercel cli where it builds it then if the build is successful it outputs it into "out" folder then it runs it from there. is there a way to do that without involving needing vercel

36 replies

Gaming

Programming