From a489a2ca0261f896732fd362aa9d1cee0129370a Mon Sep 17 00:00:00 2001 From: Oliver Davies Date: Sun, 8 Jan 2023 02:07:40 +0000 Subject: [PATCH] docs(daily-email): add 2023-01-06 --- website/src/daily-emails/2023-01-06.md | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) create mode 100644 website/src/daily-emails/2023-01-06.md diff --git a/website/src/daily-emails/2023-01-06.md b/website/src/daily-emails/2023-01-06.md new file mode 100644 index 000000000..745e38539 --- /dev/null +++ b/website/src/daily-emails/2023-01-06.md @@ -0,0 +1,23 @@ +--- +title: > + Utility-first or utility-last? +pubDate: 2023-01-06 +permalink: > + archive/2023/01/06/utility-first-or-utility-last +tags: + - tailwind-css +--- + +Tailwind CSS is based on the "utility-first" approach, where the majority of styling is done using utility CSS classes. You can still add additional custom styles if needed if there is something that can't be achieved with utilities or would be better placed in a custom CSS stylesheet. + +Utility-last is the opposite approach, where a small number of utilities are used alongside other CSS styles or another framework. This is common when [adding a utility-based framework like Tailwind CSS](https://www.oliverdavies.uk/archive/2023/01/05/adding-tailwind-to-an-existing-project) to an existing project and you want to use it for a new page or component whilst keeping the existing styles. + +This is what I did when I started learning Tachyons, and later Tailwind CSS. My project already had styling from another CSS framework, I started using utility classes and over time refactored until only utilities were used and the other styles could be removed. + +You could do the opposite too, and refactor groups of utilities into a CSS component, either by using Tailwind's `@apply` directive or [writing a plugin](https://www.oliverdavies.uk/archive/2023/01/03/tailwind-css-extensibility-is-one-of-its-best-features). + +If you did want to use Tailwind for a small number of utilities, by default, it will only generate classes that are used within HTML or template files, but it can also be configured to only use the core modules that you specify - preventing Developers from using unwanted utility based on the rules for that project. + +You could, of course, write your own utilities, or they're becoming common in other frameworks now too for things like padding, margin and colours. + +Do you typically do styling utility-first or utility-last, or are you transitioning from one to the other?