From 41fd3b4ad2eefd20d7c6ee5eb35f44f48aded801 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Igor=20Obradovi=C4=87?= Date: Fri, 2 Aug 2024 14:50:53 +0200 Subject: [PATCH 1/4] Add initial blog post draft --- ...2024-08-20-introducing-fe-libs-tailwind.md | 161 ++++++++++++++++++ 1 file changed, 161 insertions(+) create mode 100644 website/blog/2024-08-20-introducing-fe-libs-tailwind.md diff --git a/website/blog/2024-08-20-introducing-fe-libs-tailwind.md b/website/blog/2024-08-20-introducing-fe-libs-tailwind.md new file mode 100644 index 000000000..8fadba364 --- /dev/null +++ b/website/blog/2024-08-20-introducing-fe-libs-tailwind.md @@ -0,0 +1,161 @@ +--- +title: Introducing - Frontend Libs Tailwind +description: Explaining the idea behind switching to Tailwind, our first impressions and some examples. +slug: introducing-fe-libs-tailwind +authors: obradovic +date: 2024-08-20 +tags: [eightshift, tailwind] +hide_table_of_contents: false +--- + +It’s been quite a lot of changes with Eightshift DevKit over the last few months, but switching to Tailwind for our Frontend Libs is by far the most significant one. + + +## Why Tailwind? + +We wanted to speed up the development time and make the projects easier to maintain. Another reason is to make the projects lighter and faster. Our previous setup was quite powerful, but there were a few projects where we almost reached the limit of the system. + +We decided to create a version of Frontend Libs that uses Tailwind instead of SCSS and to try it out on a few of our new projects and then decide whether to continue using it or to go back to standard Frontend Libs for our default setup. What were the benefits and our initial impressions? + +## Benefits of the new setup + +Here are the stats after testing the setup: + +- sites are **5x** times faster on the frontend and **3x** times faster on the backend. +- load time is absolutely **minimal** +- **50%** fewer DOM elements +- build time is **10x+** times faster. +- final bundle sizes for JS and CSS are **3x** smaller. + +Additional benefit is that there are a lot of Tailwind community sites with ready-made components, which allow you to copy the component and modify it. + +## Initial impressions from the team + +_“The project I’m working on is the first one where we started using FE Libs Tailwind. To be honest, I was quite worried about working on a new project with this setup, as the estimate was a bit lower than what we usually estimate._ + +_After a few initial hiccups with the setup, I found it was much easier to work with and it offered a lot of possibilities. I was really surprised how easy it was to set up the default values like font sizes and colors._ + +_Using Tailwind classes speeded up development process quite significantly and I managed to implement all blocks from the initial design phase one week before the deadline.”_ + +## Requirements and how to install it + +FE Libs Tailwind requires at least **PHP 8.3**. To install it, run the following command in your project folder: + +```json +npx eightshift-create theme +``` + +The project setup script is now also upgraded and it offers a choice between standard FE Libs and FE Libs Tailwind. If you choose *simple setup*, it installs FE Libs Tailwind. + +## Project structure + +The project structure is quite similar to the standard Eightshift setup, but there are a few things to take note of. + +`tailwind.config.mjs` is the main config file for Tailwind where you define the colors, breakpoints, font sizes and all custom CSS classes you need to use in your project. + +When looking at the component or block structure, you may notice that most of them no longer have CSS files. As Tailwind offers lots of utility classes, in most cases you won’t need a CSS file for your component or a block. In case you need it, simply add `styles.css` or `styles-editor.css`. Notice how it’s no longer required to prefix the block/component name before the name of the CSS file. + +Tailwind classes are added in the `manifest.json` file of your block, but more on that in the next section. + +You will also notice that this setup uses **Eightshift UI Components** for rendering the options in the editor. We decided to decouple Eightshift UI Components from our setup to make maintenance easier. If you would like to know more, please check the [Eightshift UI Components documentation](https://eightshift.com/components/es-ui-components/getting-started). + +## How to use Tailwind classes + +In `manifest.json` file, you’ll notice there’s a new key called `“Tailwind”`. This supports the following keys: + +- **base** - the base list of classes added to the primary part of the block, e.g. the one that is the most affected by the options +- **options** - defines additional classes to be added to the **base** (or **parts**) classes if a condition is met +- **parts** - classes for parts of the block that may or may not be affected by the options +- **combinations** - the most complex cases where combinations of multiple attributes are taken into consideration, e.g. *secondary* button variant and *red* color. These are added to the **base** class only. + +Here is an example of the Tailwind classes defined for a paragraph: + +```json +"tailwind": { + "base": { + "twClasses": "font-sans [&>a]:underline font-synthesis-none" + }, + "options": { + "paragraphSize": { + "twClasses": { + "xs": "text-xs lg:text-sm leading-tight", + "sm": "text-tiny lg:text-md leading-tight", + "base": "text-base leading-normal", + "md": "text-xl md:text-2xl leading-normal", + "lg": "text-3xl md:text-4xl lg:text-5xl leading-normal" + } + } + } + } +``` + +Depending on the selected paragraph size, the classes from the **options** are added to the **base** class. If the *sm* size is selected, the output of the classes will be `font-sans [&>a]:underline font-synthesis-none text-tiny lg:text-md leading-tight` + +Here’s how the combinations are defined: + +```json +"combinations": [ + { + "attributes": { + "buttonVariant": [ + "primary", + "secondary" + ] + }, + "twClasses": "border [&>svg]:size-5 gap-2 py-2 rounded-full" + }, + { + "attributes": { + "buttonColor": "red-700", + "buttonVariant": "primary" + }, + "twClasses": "text-white bg-red-700 border-red-700 hover:bg-red-800 hover:border-red-800 disabled:bg-gray-300 disabled:border-gray-300 focus-visible:ring-red-500/30" + }, +] +``` + +The example above shows two cases. If a button variant is *primary* or *secondary*, the classes will be added to the **base** class. The second group of classes will be added only to a *primary* button variant that has a *red-700* color defined. + +Lastly, to apply the options to a specific part, instead of base classes, you can define it like this: + +```json +"options": { + "singleBannerSpacing": { + "twClasses": { + "sm": "mt-7 md:mt-9 lg:mt-10", + "md": "mt-10 md:mt-14 lg:mt-20" + }, + "part": "content" + } +} +``` + +Notice the additional “part” key after the classes that defines to which Tailwind **parts** classes this applies to. + +If you want to define classes specific to editor, you can also add `“twClassesEditor”` key. Please note that these completely override the `“twClasses”` in the editor. + +To output these classes, you can use the following helper methods: + +- `getTwClasses` - adds all classes from **base**, **options** and **combinations** (if the conditions for **options** and **combinations** are matched) +- `getTwPart` - gets classes from the **parts** group +- `getTwDynamicPart` - gets classes from the **parts** group and also checks if any of the options is defined to be used for a specific part. + +These methods are supported in both PHP and JS. + +Each of these methods also support additional classes after the `$manifest` parameter, meaning you can add more classes along the ones passed from the manifest. This can be useful if you need a class that is specific to the frontend view or the editor view. + +Here are a few examples of using these methods in PHP: + +```php +Helpers::getTwClasses($attributes, $manifest, $additionalClass); + +Helpers::getTwPart('button', $manifest); + +Helpers::getTwDynamicPart('icon', $attributes, $manifest); +``` + +These are fairly simple examples, but if you would like to know how it works in more detail, please check the [FE Libs Tailwind documentation](https://eightshift.com/docs/tailwind/intro). + +## What happens to standard Frontend Libs? + +Good question, I’ll let Goc answer that one 😂 From 20eaa89b9531c802fd7adb3eb6ef84164f1666ce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Igor=20Obradovi=C4=87?= Date: Mon, 19 Aug 2024 08:07:10 +0200 Subject: [PATCH 2/4] Apply suggestions from code review MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Goran Alković <77000136+goranalkovic-infinum@users.noreply.github.com> --- ...2024-08-20-introducing-fe-libs-tailwind.md | 35 ++++++++++--------- 1 file changed, 19 insertions(+), 16 deletions(-) diff --git a/website/blog/2024-08-20-introducing-fe-libs-tailwind.md b/website/blog/2024-08-20-introducing-fe-libs-tailwind.md index 8fadba364..aba292569 100644 --- a/website/blog/2024-08-20-introducing-fe-libs-tailwind.md +++ b/website/blog/2024-08-20-introducing-fe-libs-tailwind.md @@ -8,26 +8,28 @@ tags: [eightshift, tailwind] hide_table_of_contents: false --- -It’s been quite a lot of changes with Eightshift DevKit over the last few months, but switching to Tailwind for our Frontend Libs is by far the most significant one. +There have been quite a lot of changes to Eightshift DevKit over the last couple of months, but switching to Tailwind for our Frontend Libs is by far the most significant one. ## Why Tailwind? -We wanted to speed up the development time and make the projects easier to maintain. Another reason is to make the projects lighter and faster. Our previous setup was quite powerful, but there were a few projects where we almost reached the limit of the system. +The main ideas driving the change were ease and speed of development, better maintainability, and easier onboarding. Speed and how _heavy_ the output was were also important things. The setup we used was pretty powerful and flexible, but reached its limits above a certain threshold. -We decided to create a version of Frontend Libs that uses Tailwind instead of SCSS and to try it out on a few of our new projects and then decide whether to continue using it or to go back to standard Frontend Libs for our default setup. What were the benefits and our initial impressions? +We decided to give Tailwind a try! After a quick proof of concept, a more elaborate setup was created. Legacy parts like SCSS were taken out, and a couple of new functions and helpers were added. After the setup was mostly done, a whole new set of blocks was created to be used as the default. + +It was time to test everything on a real project, to collect some insights and feedback in order to polish and improve the setup even more. What were the benefits that we found and our initial impressions? Read on! ## Benefits of the new setup Here are the stats after testing the setup: -- sites are **5x** times faster on the frontend and **3x** times faster on the backend. +- sites are **~5x** faster on the frontend and **~3x** faster on the backend. - load time is absolutely **minimal** -- **50%** fewer DOM elements -- build time is **10x+** times faster. -- final bundle sizes for JS and CSS are **3x** smaller. +- there are **~50%** fewer DOM elements in the default set of blocks +- build time is more than **10x** faster. +- final bundle sizes for JS and CSS are **~3x** smaller. -Additional benefit is that there are a lot of Tailwind community sites with ready-made components, which allow you to copy the component and modify it. +Also, since Tailwind is so popular, there are many sites with ready-made components that developers and designers can use as a base. ## Initial impressions from the team @@ -39,29 +41,30 @@ _Using Tailwind classes speeded up development process quite significantly and I ## Requirements and how to install it -FE Libs Tailwind requires at least **PHP 8.3**. To install it, run the following command in your project folder: +The setup requires at least **PHP 8.3**. To install it, run the following command in your project folder: ```json npx eightshift-create theme ``` -The project setup script is now also upgraded and it offers a choice between standard FE Libs and FE Libs Tailwind. If you choose *simple setup*, it installs FE Libs Tailwind. +The project setup script was also upgraded, and it now offers a choice between standard and the Tailwind setup. If you choose the *simple* setup, it installs FE Libs Tailwind. ## Project structure The project structure is quite similar to the standard Eightshift setup, but there are a few things to take note of. -`tailwind.config.mjs` is the main config file for Tailwind where you define the colors, breakpoints, font sizes and all custom CSS classes you need to use in your project. +`tailwind.config.mjs` is the main config file for Tailwind. There you define things like (project-specific) colors, font sizes, spacings, and any other Tailwind configuration options, or custom utilities you might need in your project. Breakpoints are still defined in the global manifest. -When looking at the component or block structure, you may notice that most of them no longer have CSS files. As Tailwind offers lots of utility classes, in most cases you won’t need a CSS file for your component or a block. In case you need it, simply add `styles.css` or `styles-editor.css`. Notice how it’s no longer required to prefix the block/component name before the name of the CSS file. +When looking at the component or block structure, you may notice that most of them no longer have stylesheets assigned. As Tailwind is utility class-based, in most cases you won’t need a CSS file for your component or a block. +Note that you can also provide one-time arbitrary values in Tailwind (check the docs for details) if needed. In case you need it, simply add `styles.css`, `styles-editor.css`, or `styles-frontend.css`. Notice how it’s no longer required to prefix the block/component name before the name of the CSS file. -Tailwind classes are added in the `manifest.json` file of your block, but more on that in the next section. +Tailwind classes can be shared between the frontend and the backend if added in the `manifest.json` file of your block or component, but more on that in the next section. You can always just write classes in the markup if needed. -You will also notice that this setup uses **Eightshift UI Components** for rendering the options in the editor. We decided to decouple Eightshift UI Components from our setup to make maintenance easier. If you would like to know more, please check the [Eightshift UI Components documentation](https://eightshift.com/components/es-ui-components/getting-started). +You will also notice that this setup uses **Eightshift UI components** for rendering the options in the editor. We decided to decouple UI components from the setup to make maintenance easier. If you would like to know more, please check the [Eightshift UI components documentation](https://eightshift.com/components/es-ui-components/getting-started). ## How to use Tailwind classes -In `manifest.json` file, you’ll notice there’s a new key called `“Tailwind”`. This supports the following keys: +In `manifest.json` file, you’ll notice there’s a new `“Tailwind”` configuration object. This supports the following entries: - **base** - the base list of classes added to the primary part of the block, e.g. the one that is the most affected by the options - **options** - defines additional classes to be added to the **base** (or **parts**) classes if a condition is met @@ -158,4 +161,4 @@ These are fairly simple examples, but if you would like to know how it works in ## What happens to standard Frontend Libs? -Good question, I’ll let Goc answer that one 😂 +It won't be actively developed anymore, but it will stay supported for all the projects using it. From f9aa7a92504a4b89d72fcb77347afb1fcd5b70f5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Igor=20Obradovi=C4=87?= Date: Fri, 20 Sep 2024 16:03:15 +0200 Subject: [PATCH 3/4] Add two small chapters --- ...2024-08-20-introducing-fe-libs-tailwind.md | 25 ++++++++++++++++++- 1 file changed, 24 insertions(+), 1 deletion(-) diff --git a/website/blog/2024-08-20-introducing-fe-libs-tailwind.md b/website/blog/2024-08-20-introducing-fe-libs-tailwind.md index aba292569..8e6ff9114 100644 --- a/website/blog/2024-08-20-introducing-fe-libs-tailwind.md +++ b/website/blog/2024-08-20-introducing-fe-libs-tailwind.md @@ -55,7 +55,7 @@ The project structure is quite similar to the standard Eightshift setup, but the `tailwind.config.mjs` is the main config file for Tailwind. There you define things like (project-specific) colors, font sizes, spacings, and any other Tailwind configuration options, or custom utilities you might need in your project. Breakpoints are still defined in the global manifest. -When looking at the component or block structure, you may notice that most of them no longer have stylesheets assigned. As Tailwind is utility class-based, in most cases you won’t need a CSS file for your component or a block. +When looking at the component or block structure, you may notice that most of them no longer have stylesheets assigned. As Tailwind is utility class-based, in most cases you won’t need a CSS file for your component or a block. Note that you can also provide one-time arbitrary values in Tailwind (check the docs for details) if needed. In case you need it, simply add `styles.css`, `styles-editor.css`, or `styles-frontend.css`. Notice how it’s no longer required to prefix the block/component name before the name of the CSS file. Tailwind classes can be shared between the frontend and the backend if added in the `manifest.json` file of your block or component, but more on that in the next section. You can always just write classes in the markup if needed. @@ -159,6 +159,29 @@ Helpers::getTwDynamicPart('icon', $attributes, $manifest); These are fairly simple examples, but if you would like to know how it works in more detail, please check the [FE Libs Tailwind documentation](https://eightshift.com/docs/tailwind/intro). +## Making classes more readable in the manifest + +When looking at these examples, you may think that a list of Tailwind classes can get really long and hard to read. And you're right. That's why we've added an option to also define classes as an array of strings. Here's an example: + +```json +"base": { + "twClasses": [ + "flex items-center justify-between md:justify-start gap-8", + "max-w-screen-lg h-full", + "mx-auto px-4 md:px-8 lg:px-12", + "relative", + ], +}, +``` +This approach not only makes the classes more readable, but also allows you to group them. In the example above, the first group of classes is related to the layout, the second group is related to the width and height, the third group is related to margins and padding, and the last group is related to the positioning. + +## New Theme Options page and post meta +Previous versions of Eightshift DevKit relied on ACF for adding a Theme Options page. The new FE Libs Tailwind comes with a custom Theme Options page, that is built using the Eightshift UI Components. + +By default, the Theme Options allow you to set header, footer and a 404 page. These are all built as patterns and then assigned via the Theme Options. If you would like to see how it works in more detail, check the `src/ThemeOptions` folder and the `src/Blocks/components/admin-theme-options` folder. + +With this new approach, it's also possible to add custom fields on various post types, but that will be covered in a separate blog post. + ## What happens to standard Frontend Libs? It won't be actively developed anymore, but it will stay supported for all the projects using it. From d8ec74df70ee74739f3af3e5d368f60b29baa763 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Igor=20Obradovi=C4=87?= Date: Fri, 8 Nov 2024 16:28:34 +0100 Subject: [PATCH 4/4] Update content after tailwindClasses helper update --- ...2024-08-20-introducing-fe-libs-tailwind.md | 100 +++++++++++------- 1 file changed, 61 insertions(+), 39 deletions(-) diff --git a/website/blog/2024-08-20-introducing-fe-libs-tailwind.md b/website/blog/2024-08-20-introducing-fe-libs-tailwind.md index 8e6ff9114..cff15dde7 100644 --- a/website/blog/2024-08-20-introducing-fe-libs-tailwind.md +++ b/website/blog/2024-08-20-introducing-fe-libs-tailwind.md @@ -3,7 +3,7 @@ title: Introducing - Frontend Libs Tailwind description: Explaining the idea behind switching to Tailwind, our first impressions and some examples. slug: introducing-fe-libs-tailwind authors: obradovic -date: 2024-08-20 +date: 2024-11-13 tags: [eightshift, tailwind] hide_table_of_contents: false --- @@ -49,6 +49,8 @@ npx eightshift-create theme The project setup script was also upgraded, and it now offers a choice between standard and the Tailwind setup. If you choose the *simple* setup, it installs FE Libs Tailwind. +To make development easier, please refer to our [Editor setup](https://eightshift.com/docs/tailwind/getting-started#editor-setup) documentation. It will guide you through the process of setting up the editor for the project. + ## Project structure The project structure is quite similar to the standard Eightshift setup, but there are a few things to take note of. @@ -62,37 +64,42 @@ Tailwind classes can be shared between the frontend and the backend if added in You will also notice that this setup uses **Eightshift UI components** for rendering the options in the editor. We decided to decouple UI components from the setup to make maintenance easier. If you would like to know more, please check the [Eightshift UI components documentation](https://eightshift.com/components/es-ui-components/getting-started). -## How to use Tailwind classes +## How to define Tailwind classes In `manifest.json` file, you’ll notice there’s a new `“Tailwind”` configuration object. This supports the following entries: -- **base** - the base list of classes added to the primary part of the block, e.g. the one that is the most affected by the options -- **options** - defines additional classes to be added to the **base** (or **parts**) classes if a condition is met -- **parts** - classes for parts of the block that may or may not be affected by the options -- **combinations** - the most complex cases where combinations of multiple attributes are taken into consideration, e.g. *secondary* button variant and *red* color. These are added to the **base** class only. +- **parts** - contains basic classes and classes for parts of the block that may or may not be affected by the options and/or combinations. It is recommended to have a **base** part defined. +- **options** - defines additional classes to be added to any of the **parts** classes if a condition is met. +- **combinations** - the most complex cases where combinations of multiple attributes are taken into consideration, e.g. *secondary* button variant and *red* color. These can be added to any of the **parts** classes. Here is an example of the Tailwind classes defined for a paragraph: ```json "tailwind": { + "parts": { "base": { "twClasses": "font-sans [&>a]:underline font-synthesis-none" - }, - "options": { - "paragraphSize": { - "twClasses": { - "xs": "text-xs lg:text-sm leading-tight", - "sm": "text-tiny lg:text-md leading-tight", - "base": "text-base leading-normal", - "md": "text-xl md:text-2xl leading-normal", - "lg": "text-3xl md:text-4xl lg:text-5xl leading-normal" - } + } + }, + "options": { + "paragraphSize": { + "twClasses": { + "xs": "text-xs lg:text-sm leading-tight", + "sm": "text-tiny lg:text-md leading-tight", + "base": "text-base leading-normal", + "md": "text-xl md:text-2xl leading-normal", + "lg": "text-3xl md:text-4xl lg:text-5xl leading-normal" } } } +} ``` -Depending on the selected paragraph size, the classes from the **options** are added to the **base** class. If the *sm* size is selected, the output of the classes will be `font-sans [&>a]:underline font-synthesis-none text-tiny lg:text-md leading-tight` +Depending on the selected paragraph size, the classes from the **options** are added to the **base** class from **parts**. If the *sm* size is selected, the output of the classes will be `font-sans [&>a]:underline font-synthesis-none text-tiny lg:text-md leading-tight`. + +:::note +**base** is a default part class, so if no part is defined, the additional classes from **options** will be added to the base class. +::: Here’s how the combinations are defined: @@ -117,7 +124,7 @@ Here’s how the combinations are defined: ] ``` -The example above shows two cases. If a button variant is *primary* or *secondary*, the classes will be added to the **base** class. The second group of classes will be added only to a *primary* button variant that has a *red-700* color defined. +The example above shows two cases. If a button variant is *primary* or *secondary*, the classes will be added to the **base** part class. The second group of classes will be added only to a *primary* button variant that has a *red-700* color defined. Lastly, to apply the options to a specific part, instead of base classes, you can define it like this: @@ -133,30 +140,43 @@ Lastly, to apply the options to a specific part, instead of base classes, you ca } ``` -Notice the additional “part” key after the classes that defines to which Tailwind **parts** classes this applies to. +Notice the additional “part” key after the classes that defines to which Tailwind **parts** classes this applies to. Similar approach can be used for **combinations**. -If you want to define classes specific to editor, you can also add `“twClassesEditor”` key. Please note that these completely override the `“twClasses”` in the editor. +If you want to define classes specific to editor, you can also add `“twClassesEditor”` or `“twClassesEditorOnly”` keys. `“twClassesEditor”` will only append classes to the existing `“twClasses”`, while the latter will completely override them. -To output these classes, you can use the following helper methods: +```json +"parts": { + "icon": { + "twClasses": "text-white hover:text-blue-200 focus:outline-none focus-visible:text-blue-500 [&>svg]:size-5 transition", + "twClassesEditorOnly": "text-white size-5" + } +} +``` -- `getTwClasses` - adds all classes from **base**, **options** and **combinations** (if the conditions for **options** and **combinations** are matched) -- `getTwPart` - gets classes from the **parts** group -- `getTwDynamicPart` - gets classes from the **parts** group and also checks if any of the options is defined to be used for a specific part. +## Outputting Tailwind classes -These methods are supported in both PHP and JS. +To output these classes, you can use the following helper method: -Each of these methods also support additional classes after the `$manifest` parameter, meaning you can add more classes along the ones passed from the manifest. This can be useful if you need a class that is specific to the frontend view or the editor view. +- `tailwindClasses` - the only helper method you need to output the classes. All the magic happens behind the scenes, depending on the definitions in the manifest and the conditions that are met. -Here are a few examples of using these methods in PHP: +This method is supported in both PHP and JS. -```php -Helpers::getTwClasses($attributes, $manifest, $additionalClass); +:::note +In versions prior to FE Libs Tailwind **1.4.0**, different helper methods were used, depending if you needed base class, part class, or a part class affected by the options (dynamic part). We decided to simplify this and merge all of these methods into one. +::: -Helpers::getTwPart('button', $manifest); +Here are a few examples of using the method in PHP: + +```php +Helpers::tailwindClasses('base', $attributes, $manifest); -Helpers::getTwDynamicPart('icon', $attributes, $manifest); +Helpers::tailwindClasses('icon', $attributes, $manifest, $additionalClass); ``` +The first parameter is the part name for which you want to output the classes. The second parameter is the attributes array that you want to check against the options and combinations. The third parameter is the manifest array that contains the Tailwind classes. + +This method also supports additional classes after the `$manifest` parameter, meaning you can add more classes along the ones passed from the manifest. This can be useful if you need a class that is specific to the frontend view or the editor view. + These are fairly simple examples, but if you would like to know how it works in more detail, please check the [FE Libs Tailwind documentation](https://eightshift.com/docs/tailwind/intro). ## Making classes more readable in the manifest @@ -164,14 +184,16 @@ These are fairly simple examples, but if you would like to know how it works in When looking at these examples, you may think that a list of Tailwind classes can get really long and hard to read. And you're right. That's why we've added an option to also define classes as an array of strings. Here's an example: ```json -"base": { - "twClasses": [ - "flex items-center justify-between md:justify-start gap-8", - "max-w-screen-lg h-full", - "mx-auto px-4 md:px-8 lg:px-12", - "relative", - ], -}, +"parts": { + "base": { + "twClasses": [ + "flex items-center justify-between md:justify-start gap-8", + "max-w-screen-lg h-full", + "mx-auto px-4 md:px-8 lg:px-12", + "relative", + ], + } +} ``` This approach not only makes the classes more readable, but also allows you to group them. In the example above, the first group of classes is related to the layout, the second group is related to the width and height, the third group is related to margins and padding, and the last group is related to the positioning.