Skip to content
pinegrow.com
Docs menuTailwind CSS
Tailwind CSS

Tailwind CSS tutorials

Updated

Tutorials and videos for the Tailwind Visual Editor, from the Pine Adventures playground project with its guided tour to step-by-step landing page and WordPress theme tutorials.

On this page

Learn the Tailwind Visual Editor with these tutorials and videos. The newest ones use Tailwind CSS 4. Older tutorials were made with earlier versions of Pinegrow and Tailwind CSS, so some steps and class names differ from what you see today. The ideas and workflows still apply.

Start with Tailwind CSS 4

Pine Adventures playground project

Pine Adventures is an example travel website styled with Tailwind CSS 4 and compiled by Pinegrow's built-in compiler. Its colors and fonts are set in the Design panel. A guided tour in the Info panel walks you through the main steps: select elements, edit text, style with Tailwind, change the theme, insert and duplicate elements, check the phone layout and look at the code. Each step has links that select the element or open the right panel for you.

To open it in Pinegrow Desktop 10.1 or newer, choose the Getting started tab on the start screen, or Help › Getting started guide…, and pick Pine Adventures. Pinegrow copies the website to your Pinegrow Projects folder, so you can change it freely.

Create a Tailwind CSS 4 project with AI

Describe the website you want, choose Tailwind CSS 4 as the framework, and the AI Assistant creates the first version of the project for you to continue editing visually. See Choose the framework for AI-generated projects.

Convert Tailwind CSS 3 to 4

A short video on how Pinegrow converts Tailwind CSS 3 blocks and code when you use them in a Tailwind CSS 4 project:

See also Upgrade a project from Tailwind CSS 3 to 4.

Step-by-step tutorials

Fantico: build a Tailwind CSS landing page

Fantico - Creating a landing page with TailwindCSS and Tailwind Visual Editor builds a complete landing page step by step. It was written for Pinegrow 5.97 and an earlier Tailwind CSS version.

Timelines with plain HTML and Tailwind CSS

Creating plain HTML and Tailwind CSS Timelines with Pinegrow builds a timeline with Tailwind CSS and reuses repeated items with snippets. Written in 2020.

WordPress themes with Tailwind CSS

Older tutorials

Customizing a Tailwind CSS theme (legacy)

The complete guide to customizing a Tailwind CSS theme sets up a custom theme with an external build process for Tailwind CSS 1 and 2. It does not work with Tailwind CSS 3 or 4. For current projects, see Match visual controls to a custom theme and Working with Tailwind CSS 3.