uuid: - value: 4b7e6128-69d3-4511-a3ca-cfba25c6e002 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: | Adding Tailwind CSS to an existing project created: - value: '2023-01-05T00: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/05/adding-tailwind-to-an-existing-project langcode: en body: - value: |

Tailwind's configuration file also makes it easy to add it to an existing codebase, whether it uses custom CSS or another CSS framework.

You can opt-out of Tailwind's CSS reset and normalisation by adding corePlugins: { preflight: false } to tailwind.config.js, and if you have duplicate classes with existing classes and Tailwind-generated ones, you can add prefix: 'tw-' to prefix all of Tailwind's class names and avoid the conflicts.

If you need to deal with specificity, you can mark Tailwind-generated classes as important by adding important: true so that they can override any existing styling. You can do the same in HTML code by prefixing a class name with an exclamation mark - e.g. !flex.

Or, if you know that your Tailwind styles will only be used within a certain element, like #app, instead of making all classes important, by adding important: "#app" to the configuration, Tailwind classes will be prefixed with that selector - making them more specific.

Once these options are set, you can start using Tailwind without affecting the existing styles.

Doing this, and starting small by using a small number of utilities can be a good step towards migrating an existing codebase to use Tailwind and removing the existing styles at a later date.

format: full_html processed: |

Tailwind's configuration file also makes it easy to add it to an existing codebase, whether it uses custom CSS or another CSS framework.

You can opt-out of Tailwind's CSS reset and normalisation by adding corePlugins: { preflight: false } to tailwind.config.js, and if you have duplicate classes with existing classes and Tailwind-generated ones, you can add prefix: 'tw-' to prefix all of Tailwind's class names and avoid the conflicts.

If you need to deal with specificity, you can mark Tailwind-generated classes as important by adding important: true so that they can override any existing styling. You can do the same in HTML code by prefixing a class name with an exclamation mark - e.g. !flex.

Or, if you know that your Tailwind styles will only be used within a certain element, like #app, instead of making all classes important, by adding important: "#app" to the configuration, Tailwind classes will be prefixed with that selector - making them more specific.

Once these options are set, you can start using Tailwind without affecting the existing styles.

Doing this, and starting small by using a small number of utilities can be a good step towards migrating an existing codebase to use Tailwind and removing the existing styles at a later date.

summary: null field_daily_email_cta: { }