22 lines
1.4 KiB
Markdown
22 lines
1.4 KiB
Markdown
---
|
|
title: >
|
|
Adding Tailwind CSS to an existing project
|
|
pubDate: 2023-01-05
|
|
permalink: >-
|
|
archive/2023/01/05/adding-tailwind-to-an-existing-project
|
|
tags:
|
|
- tailwind-css
|
|
---
|
|
|
|
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.
|