91 lines
No EOL
4.5 KiB
JSON
91 lines
No EOL
4.5 KiB
JSON
{
|
|
"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\n"
|
|
}
|
|
],
|
|
"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": "\n <p>Tailwind's configuration file also makes it easy to add it to an existing codebase, whether it uses custom CSS or another CSS framework.<\/p>\n\n<p>You can opt-out of Tailwind's CSS reset and normalisation by adding <code>corePlugins: { preflight: false }<\/code> to tailwind.config.js, and if you have duplicate classes with existing classes and Tailwind-generated ones, you can add <code>prefix: 'tw-'<\/code> to prefix all of Tailwind's class names and avoid the conflicts.<\/p>\n\n<p>If you need to deal with specificity, you can mark Tailwind-generated classes as important by adding <code>important: true<\/code> 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. <code>!flex<\/code>.<\/p>\n\n<p>Or, if you know that your Tailwind styles will only be used within a certain element, like <code>#app<\/code>, instead of making all classes important, by adding <code>important: \"#app\"<\/code> to the configuration, Tailwind classes will be prefixed with that selector - making them more specific.<\/p>\n\n<p>Once these options are set, you can start using Tailwind without affecting the existing styles.<\/p>\n\n<p>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.<\/p>\n\n ",
|
|
"format": "full_html",
|
|
"processed": "\n <p>Tailwind's configuration file also makes it easy to add it to an existing codebase, whether it uses custom CSS or another CSS framework.<\/p>\n\n<p>You can opt-out of Tailwind's CSS reset and normalisation by adding <code>corePlugins: { preflight: false }<\/code> to tailwind.config.js, and if you have duplicate classes with existing classes and Tailwind-generated ones, you can add <code>prefix: 'tw-'<\/code> to prefix all of Tailwind's class names and avoid the conflicts.<\/p>\n\n<p>If you need to deal with specificity, you can mark Tailwind-generated classes as important by adding <code>important: true<\/code> 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. <code>!flex<\/code>.<\/p>\n\n<p>Or, if you know that your Tailwind styles will only be used within a certain element, like <code>#app<\/code>, instead of making all classes important, by adding <code>important: \"#app\"<\/code> to the configuration, Tailwind classes will be prefixed with that selector - making them more specific.<\/p>\n\n<p>Once these options are set, you can start using Tailwind without affecting the existing styles.<\/p>\n\n<p>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.<\/p>\n\n ",
|
|
"summary": null
|
|
}
|
|
]
|
|
} |