CSS Framework

The CSS framework recommended by this guide is Tailwind CSS. This CSS framework comes with a lot of convenient utility classes that allow you to apply complex styling whilst not requiring much CSS code. Due to the brevity of Tailwind CSS, it is applied inline in HTML files and not in separate CSS files.

Tailwind CSS is built into the Phoenix framework. So there is no need to setup anything to start using Tailwind CSS in a Phoenix project, it should work out of the box.

For more information about Tailwind CSS and how to use it, please refer to the Tailwind CSS Documentation.

Visual Studio Code Integration

To support auto-completion, syntax highlighting and linting of Tailwind CSS in Visual Studio Code, install the Tailwind CSS IntelliSense plugin. To install this plugin, run:

code --install-extension bradlc.vscode-tailwindcss