73 lines
4.6 KiB
YAML
73 lines
4.6 KiB
YAML
uuid:
|
|
- value: c1bc355c-4dfb-4ea0-a98e-9801871107f2
|
|
langcode:
|
|
- value: en
|
|
type:
|
|
- target_id: daily_email
|
|
target_type: node_type
|
|
target_uuid: 8bde1f2f-eef9-4f2d-ae9c-96921f8193d7
|
|
revision_timestamp:
|
|
- value: '2025-05-11T09:00:48+00:00'
|
|
revision_uid:
|
|
- target_type: user
|
|
target_uuid: b8966985-d4b2-42a7-a319-2e94ccfbb849
|
|
revision_log: { }
|
|
status:
|
|
- value: true
|
|
uid:
|
|
- target_type: user
|
|
target_uuid: b8966985-d4b2-42a7-a319-2e94ccfbb849
|
|
title:
|
|
- value: |
|
|
Utility-first or utility-last?
|
|
created:
|
|
- value: '2023-01-06T00:00:00+00:00'
|
|
changed:
|
|
- value: '2025-05-11T09:00:48+00:00'
|
|
promote:
|
|
- value: false
|
|
sticky:
|
|
- value: false
|
|
default_langcode:
|
|
- value: true
|
|
revision_translation_affected:
|
|
- value: true
|
|
path:
|
|
- alias: /daily/2023/01/06/utility-first-or-utility-last
|
|
langcode: en
|
|
body:
|
|
- value: |
|
|
<p>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.</p>
|
|
|
|
<p>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 <a href="/daily/2023/01/05/adding-tailwind-to-an-existing-project">adding a utility-based framework like Tailwind CSS</a> to an existing project and you want to use it for a new page or component whilst keeping the existing styles.</p>
|
|
|
|
<p>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.</p>
|
|
|
|
<p>You could do the opposite too, and refactor groups of utilities into a CSS component, either by using Tailwind's <code>@apply</code> directive or <a href="/daily/2023/01/03/tailwind-css-extensibility-is-one-of-its-best-features">writing a plugin</a>.</p>
|
|
|
|
<p>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.</p>
|
|
|
|
<p>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.</p>
|
|
|
|
<p>Do you typically do styling utility-first or utility-last, or are you transitioning from one to the other?</p>
|
|
|
|
|
|
format: full_html
|
|
processed: |
|
|
<p>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.</p>
|
|
|
|
<p>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 <a href="/daily/2023/01/05/adding-tailwind-to-an-existing-project">adding a utility-based framework like Tailwind CSS</a> to an existing project and you want to use it for a new page or component whilst keeping the existing styles.</p>
|
|
|
|
<p>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.</p>
|
|
|
|
<p>You could do the opposite too, and refactor groups of utilities into a CSS component, either by using Tailwind's <code>@apply</code> directive or <a href="/daily/2023/01/03/tailwind-css-extensibility-is-one-of-its-best-features">writing a plugin</a>.</p>
|
|
|
|
<p>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.</p>
|
|
|
|
<p>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.</p>
|
|
|
|
<p>Do you typically do styling utility-first or utility-last, or are you transitioning from one to the other?</p>
|
|
|
|
|
|
summary: null
|
|
field_daily_email_cta: { }
|