Applying the class name through json not working, same works if hardcoded

[3gwebtrain]

Current Behavior

No Style properties added to the element

Expected Behavior

all properties from className should be added after component rendered:

It's my json:

export const initialInitialPropsSchema: InitialProps[] = [
  { className: 'text-secondary text-5xl font-semibold', label: 'B' },
  { className: 'text-white  text-5xl font-semibold', label: 'M' },
  { className: 'text-tertiary  text-5xl font-semibold', label: 'A' },
];

my header: where I apply my class names on loop:

`export const Header: FC<{ initials: InitialProps[] }> = ({ initials }) => { return (

{initials.length && initials.map((initial) => (

{initial.label}

))}

); };`

But in the browser I see all class names are applied. But no property update with element. If I hard code the classNames, instead of assign from json it works fine. I am using Nx workspace with vite for react app. the header placed under the header library.

in browser I see this:

Github Repo

[No response](https://github.com/3gwebtrain/portfolio)

Steps to Reproduce

1.

Nx Report

Node : 16.13.2
   OS   : darwin arm64
   npm  : 8.1.2

   nx : 15.3.3
   @nrwl/angular : Not Found
   @nrwl/cypress : Not Found
   @nrwl/detox : Not Found
   @nrwl/devkit : 15.3.3
   @nrwl/esbuild : Not Found
   @nrwl/eslint-plugin-nx : 15.3.3
   @nrwl/expo : Not Found
   @nrwl/express : Not Found
   @nrwl/jest : 15.3.3
   @nrwl/js : 15.3.3
   @nrwl/linter : 15.3.3
   @nrwl/nest : Not Found
   @nrwl/next : Not Found
   @nrwl/node : Not Found
   @nrwl/nx-cloud : Not Found
   @nrwl/nx-plugin : Not Found
   @nrwl/react : 15.3.3
   @nrwl/react-native : Not Found
   @nrwl/rollup : Not Found
   @nrwl/schematics : Not Found
   @nrwl/storybook : Not Found
   @nrwl/web : Not Found
   @nrwl/webpack : Not Found
   @nrwl/workspace : 15.3.3
   typescript : 4.8.4
   ---------------------------------------
   Local workspace plugins:
   ---------------------------------------
   Community plugins:
     @nrwl/vite: 15.3.3

Failure Logs

No response

Additional Information

No response

[3gwebtrain]

vite.config.ts:

/// <reference types="vitest" />
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import viteTsConfigPaths from 'vite-tsconfig-paths';

export default defineConfig({
  server: {
    port: 4200,
    host: 'localhost',
  },
  plugins: [
    react(),
    viteTsConfigPaths({
      root: './',
    }),
  ],

  test: {
    globals: true,
    cache: {
      dir: './node_modules/.vitest',
    },
    environment: 'jsdom',
    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
  },
});

[3gwebtrain]

when i add this class as hardcoded, in the component for testing apart from loop, <h1 className="text-secondary text-tertiary text-white text-5xl font-semibold"></h1> in the loop classes as well works. If i remove then it goes... not clear with issue

I got one suggestion here:

https://stackoverflow.com/questions/74861826/applying-the-class-name-through-json-not-working-same-works-if-hardcoded/74864791#74864791

[jaysoo]

As the reply on Stackoverflow suggests, this is not an Nx issue.

The recommendation I would make is for you to create you custom class names in your own CSS file.

e.g.

/* header.css */
.a {
  @apply text-secondary text-5xl font-semibold;
}

.b {
  @apply text-white  text-5xl font-semibold;
}

.c {
  @apply text-tertiary  text-5xl font-semibold;
}

This way in your component you can use your custom class names a, b, c (or whatever name you give them) and tailwind should keep the styles intact.

See: https://tailwindcss.com/docs/functions-and-directives

[github-actions[bot]]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.