Configure headless sites to use Tailwind

When you create a basic site, by default, it uses the Bootstrap 5 grid system. If you want to use the Tailwind grid system, you must create an empty site and, in the grid settings of that site, specify that you want to use Tailwind. If you are using the XM Cloud starter kit, or if you are using your own code, you must add support for tailwind and its CSS classes to your front-end code.

Note

For more information about Tailwind, for example the CSS classes, see https://tailwindcss.com/docs/.

To configure your site to use Tailwind:

  1. Create an empty site on the XM Cloud Dashboard or in the Content Editor.

    Important

    If you are using the Content Editor, in the Create a new headless site dialog box, the Basic site check box must be cleared.

  2. Open the Content Editor and, in the content tree, navigate to the settings of the site you have just created.

  3. In the Grid mapping field, select Tailwind.

  4. Save your changes.

Do you have some feedback for us?

If you have suggestions for improving this article,