cleaner way to style the website

[AugustinMauroy]

Now the project use tailwind in className. But there are problem with that, it's create spaghetti code.

So the solution is module css

Module css with tailwind allow us to separate JSX and logic to the style.

here an example:

import styles from './component.module.css';
import type { FC } from 'react';

const Component: FC = () => (
    <div className={styles.card}>
        <h1>Hello, World!</h1>
    </div>
);

export default Component;

.card {
    @apply bg-white
        border
        border-gray-300
        rounded-lg
        shadow-md
        dark:border-gray-700
        dark:bg-gray-800;

    h1 {
        @apply text-2xl
            font-semibold
            dark:text-white;
    }
}

[ricardobeat]

@AugustinMauroy just a drive-by comment, but what's the point in doing that? The project already uses styled-components, which allow defining these in component files with full type checking. Your suggestion is pretty much reverting to plain CSS / postCSS, in which case you don't need Tailwind at all.

[AugustinMauroy]

in which case you don't need Tailwind at all.

Nop you still use tailwindcss. But you go away from styled-components which is not the best practice.

[mauro-balades]

Im not going to put all the effort as it's not really a priority. But im always accepting PRs!