Styles: docs and CSS variables #139

andrecasal · 2023-06-05T18:25:45Z

andrecasal
Jun 5, 2023

I've recently migrated my platform to the Epic Stack's latest version.

Styles keep being a bit of a pain because there are custom styles configured in tailwind.config.ts and they are spread throughout the code base.

Screenshot of a search for the "-night-" class

It's a bit painful to delete all those 👆 classes.

I'd like to propose two things:

Add documentation around styling
Implement the theme switch by changing CSS Variable's values

Implement the theme switch by changing CSS Variable's values

Change the CSS Variable's values according to the theme:
tailwind.css:

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

:root {
	--color-background: white;
	--color-foreground: black;
	--color-primary: green;
	--color-accent: orange;
	--color-success: black;
	--color-info: black;
	--color-warning: black;
	--color-danger: black;
}

:root.dark {
	--color-background: black;
	--color-foreground: white;
}

Use those CSS variables in your semantic styles:
tailwind.config.ts:

export default {
	content: ['./app/**/*.{ts,tsx,jsx,js}'],
	darkMode: 'class',
	theme: {
		extend: {
			colors: {
				background: 'var(--color-background)', // used in <body className="bg-background text-foreground">
				foreground: 'var(--color-foreground)', // used in <body className="bg-background text-foreground">
				primary: 'var(--color-primary)',
				accent: 'var(--color-accent)',
				success: 'var(--color-success)',
				info: 'var(--color-info)',
				warning: 'var(--color-warning)',
				danger: 'var(--color-danger)',
			},
		}
	}
}

This way you can build your entire app with your semantic styles, while still having a single source of truth in your tailwind.css file.

The only down-side to this is that we lose the ability to see the colors in VS Code and we see the CSS variable instead:

andrecasal · 2023-06-05T18:32:13Z

andrecasal
Jun 5, 2023
Author

Also, I'd love to hear your thoughts on styling by HTML tags (h1, h2, h3, h4, h5, h6, input, select, etc) in the tailwind.css file vs building custom components like <H1>, <H2>, ..., <Input>, etc.

1 reply

kentcdodds Jun 5, 2023
Maintainer

I prefer just applying the class names directly to the tags. So not global, and not components, but just adding the class names as needed. I think style and semantics are separate concerns and by styling things globally or using components you're coupling them unnecessarily.

That said, just like with regular code, if I find I'm repeating myself a lot, I'll make an abstraction. Sometimes that's a string of tailwind classes, other times that's a full blown component. So the line is a little fuzzy. But I do think it's important to keep the focus on separating semantic HTML and style. Progressive enhancement etc. etc.

kentcdodds · 2023-06-05T22:07:25Z

kentcdodds
Jun 5, 2023
Maintainer

I'm a fan of the suggested solution. I've done it this way before and I liked it. Would you be interested in making a PR for that?

4 replies

rajeshg Jun 6, 2023

What about using CSS libraries like daisyui? Provides a good set of styles and themes for common interface elements.

https://daisyui.com/

kentcdodds Jun 6, 2023
Maintainer

I'd definitely welcome an example showing how to use daisyui with the Epic Stack. Not sure I'm ready to commit to it just yet though.

andrecasal Jun 6, 2023
Author

I'm a fan of the suggested solution. I've done it this way before and I liked it. Would you be interested in making a PR for that?

Yes, I'd be happy to. What should we do with the current tailwind configuration? I'll open a draft PR later today and discuss it there 👍

kentcdodds Jun 7, 2023
Maintainer

What should we do with the current tailwind configuration?

We change it to be well suited for the latest recommendations :)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Styles: docs and CSS variables #139

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 2 comments 5 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

Styles: docs and CSS variables #139

andrecasal Jun 5, 2023

Implement the theme switch by changing CSS Variable's values

Replies: 2 comments · 5 replies

andrecasal Jun 5, 2023 Author

kentcdodds Jun 5, 2023 Maintainer

kentcdodds Jun 5, 2023 Maintainer

rajeshg Jun 6, 2023

kentcdodds Jun 6, 2023 Maintainer

andrecasal Jun 6, 2023 Author

kentcdodds Jun 7, 2023 Maintainer

andrecasal
Jun 5, 2023

Replies: 2 comments 5 replies

andrecasal
Jun 5, 2023
Author

kentcdodds Jun 5, 2023
Maintainer

kentcdodds
Jun 5, 2023
Maintainer

kentcdodds Jun 6, 2023
Maintainer

andrecasal Jun 6, 2023
Author

kentcdodds Jun 7, 2023
Maintainer