Creating a Tailwind CSS sample site with XM Cloud - Part 6 Applying Tailwind CSS to Next.js
Since the samples provided in the Starter Kit are created using Bootstrap 5, we will rewrite the Next.js samples to use Tailwind CSS.
A world-class, enterprise-ready CMS that allows you to quickly create, manage, and deliver the right content everywhere.
Since the samples provided in the Starter Kit are created using Bootstrap 5, we will rewrite the Next.js samples to use Tailwind CSS.
Items created in Sitecore XM Cloud can be serialized as YAML files using the Sitecore CLI tools. This time, we will use this mechanism to manage site information on GitHub.
In this article, we will create a sample site on XM Cloud. We will also cover which style sheets to use for the site at the end.
I have been wondering how best to handle .env files when introducing Tips on the blog, but I will reflect this since it was introduced in XM Cloud Tutorials #4.
Previously, we used XM Cloud's project template to create a repository on GitHub, create a branch, and add a new Next.js project. This time, we will deploy this to XM Cloud.
I would like to create a sample using the tips I have been introducing in my blog. This time, we will create the base of a sample that can use Tailwind CSS.
We have been covering XM Cloud on our blog for some time now, and now that the project creation screen has been enhanced, we will once again be creating a CMS with the latest screens.
In this article, we will focus on a useful feature provided by Sitecore XM / XM Cloud: Rendering Contents Resolvers. Multiple definitions are provided in the rendering definitions, which can be used to efficiently create components.
The sample already in operation at hand uses Tailwind.css, but we would like to go one step further and apply NextUI this time. This is a user interface tool provided by Vercel, which offers Next.js.
In the last issue, we proceeded to place and run the sample code. This time, we would like to check what kind of code is needed and in what form the data is held. What kind of code is needed to be written and in what form will the data be held?
In this blog series, we've covered components registering with Headless SXA and those created without code using Sitecore Components. Now, we'll introduce a different implementation involving a component.
Previously, we created fixed images and text for the components and pasted them onto the page, but this time we want to add our own template and use that data to render the components.