> For the complete documentation index, see [llms.txt](https://wplake.gitbook.io/advanced-views/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://wplake.gitbook.io/advanced-views/features/file-system-storage/advanced-usage.md).

# File System feature: Advanced usage

## 1. Sass and TypeScript usage

Every L*ayout* 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](https://gitlab.com/wplake/sass-and-typescript-demo-for-advanced-views/).

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](/advanced-views/features/workflow/cross-installation-components.md).

{% hint style="info" %}
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*.
{% endhint %}

## 2. Tailwind usage

[Tailwind](https://tailwindcss.com/) 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](https://gitlab.com/wplake/tailwind-demo-for-advanced-views/).  If you're building from scratch, check [our starter theme with Tailwind](https://gitlab.com/wplake/avf-tailwind-starter-theme).

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](https://gitlab.com/wplake/tailwind-demo-for-advanced-views/) 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.

{% hint style="info" %}
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)
{% endhint %}