# Full website example with theme + Tailwindcss

**URL:** <https://forum.ghost.org/t/full-website-example-with-theme-tailwindcss/30390>\
**Category:** Themes\
**Created:** [May 27, 2022, 12:23am UTC](https://forum.ghost.org/t/full-website-example-with-theme-tailwindcss/30390 "2022-05-27T00:23:56Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![mark.l](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/mark.l/32/16545_2.png) [@mark.l](https://forum.ghost.org/u/mark.l)\
**Post date:** [May 27, 2022, 12:23am UTC](https://forum.ghost.org/t/full-website-example-with-theme-tailwindcss/30390/1 "2022-05-27T00:23:56Z")

</div>

The marketing website for my company’s new [organization chart software](https://lexchart.com), Lexchart, is built with Ghost. It might be a useful example for some of you, because it is much more than a blog. We are using Ghost for the entire site, including:

- Custom home page which is pulling data from posts with Handlebars,
- Custom landing pages like [org chart software pricing](https://lexchart.com/pricing/)
- Product documentation
- Tutorials with embedded videos from [Wistia](https://wistia.com)
- Newsletter signup.
- lots of examples of different card types

We do not use paid memberships from Ghost because the Lexchart app has both a free and paid version with its own registration system.

The site starts with the [Firma](https://ghost.org/themes/firma/) theme. @eddiesigner has been great to work with. Firma includes a content search feature which was important to us. Fima also includes Alpinejs so we can develop additional interactive elements.

Beyond that we added [tailwindcss](https://tailwindcss.com) with custom prefixed classes to avoid CSS conflicts with the theme. This allows us to extend the design in Tailwind which is our preferred CSS tech. If you are interested in using Tailwind with an existing theme, this tutorial on [adding tailwind to a project](https://www.youtube.com/watch?v=oG6XPy1t1KA) is indispensable.

---

<div class="post-metadata">

**Author:** ![mark.l](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/mark.l/32/16545_2.png) [@mark.l](https://forum.ghost.org/u/mark.l)\
**Post date:** [May 27, 2022, 12:27am UTC](https://forum.ghost.org/t/full-website-example-with-theme-tailwindcss/30390/2 "2022-05-27T00:27:04Z")

</div>

And I should add it is self-hosted on DO with the Ghost marketplace droplet. Between DigitalOcean and Ghost’s documentation, pretty straightforward.