File System feature: Advanced usage

1. Sass and TypeScript usage

Every Layout and Post Selection folder includes a style.css file for CSS code and script.js for JavaScript code. You have the option to use style.scss and script.ts files and compile them into style.css and script.js respectively. For a practical example, refer to the demo repository.

While Layout and Post Selection don't have fields in the UI representing style.scss and script.ts contents, these filenames are reserved and supported behind the scenes. This means that if you disable the FS and then enable it again, these files will be restored with their content. They are also supported in import/export and the Reusable Components library.

Tip: In the plugin Settings, under the Defaults tab, there are 'Sass' and 'TypeScript' Template fields. If you fill them with any content (e.g., a comment line), Advanced Views will create these files automatically during Layout and Post Selection creation, saving time if you use Sass for all the Layouts and Post Selections.

2. Tailwind usage

Tailwind is a great utility-first CSS framework, and with the File System storage active, you can use it in Layouts and Post Selection templates. For a practical example, refer to the demo repository. If you're building from scratch, check our starter theme with Tailwind.

Tailwind is fully supported by Advanced Views. While in many cases Tailwind is used in static builds where the list of elements is known during build time, this isn't the case with Layouts and Post Selections, as their appearance is controlled by the database.

To achieve this, the demo repository has a setup where every component has its own utility classes, while Tailwind globals are stored separately. Additionally, the utility classes that appear more than once are automatically merged by Advanced Views during rendering.

Tip: If you are using Tailwind, you'll likely want to disable the BEM classes generation for the default template. You can do this in the settings of the particular Layout or Post Selection, or globally in the plugin settings. Additionally, in the Defaults tab of the plugin settings, you can define the Sass template's content, as mentioned in the repository description. This will save you from manually creating this file each time you create a Layout or Post Selection. (See the Sass/TypeScript chapter above)