PHPackages                             jramke/tailwind-styled-content - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Templating & Views](/categories/templating)
4. /
5. jramke/tailwind-styled-content

ActiveTypo3-cms-extension[Templating & Views](/categories/templating)

jramke/tailwind-styled-content
==============================

Fluid templates for TYPO3 content elements with Tailwind CSS.

1.2.1(1y ago)61.1k↓50%1[2 issues](https://github.com/jramke/tailwind_styled_content/issues)[1 PRs](https://github.com/jramke/tailwind_styled_content/pulls)GPL-2.0-or-laterHTMLPHP >=8.1

Since Jul 26Pushed 6mo ago1 watchersCompare

[ Source](https://github.com/jramke/tailwind_styled_content)[ Packagist](https://packagist.org/packages/jramke/tailwind-styled-content)[ RSS](/packages/jramke-tailwind-styled-content/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (6)Dependencies (2)Versions (7)Used By (0)

Note

This extension is currently not maintained. I recommend using Tailwind v4 instead of v3 and just copy paste the things you need from this extension directly into your sitepackage. Also DaisyUI might not be the best choice for your project anymore. Maybe you would like to consider [Fluid Primitives](https://fluid-primitives.joostramke.com/).

Tailwind Styled Content
=======================

[](#tailwind-styled-content)

[![Total downloads](https://camo.githubusercontent.com/8f1659ccb44e01b4eaa34ff243979dc49fbb109ef606819957d026fd201a86b3/68747470733a2f2f7479706f332d6261646765732e6465762f62616467652f7461696c77696e645f7374796c65645f636f6e74656e742f646f776e6c6f6164732f736869656c64732e737667)](https://camo.githubusercontent.com/8f1659ccb44e01b4eaa34ff243979dc49fbb109ef606819957d026fd201a86b3/68747470733a2f2f7479706f332d6261646765732e6465762f62616467652f7461696c77696e645f7374796c65645f636f6e74656e742f646f776e6c6f6164732f736869656c64732e737667)[![Stability](https://camo.githubusercontent.com/8811cd82e9b4d40dbe6f39a0ded27f4782685b2d41acaa40d6c0360d9b37c60a/68747470733a2f2f7479706f332d6261646765732e6465762f62616467652f7461696c77696e645f7374796c65645f636f6e74656e742f73746162696c6974792f736869656c64732e737667)](https://camo.githubusercontent.com/8811cd82e9b4d40dbe6f39a0ded27f4782685b2d41acaa40d6c0360d9b37c60a/68747470733a2f2f7479706f332d6261646765732e6465762f62616467652f7461696c77696e645f7374796c65645f636f6e74656e742f73746162696c6974792f736869656c64732e737667)[![TYPO3 versions](https://camo.githubusercontent.com/a9ce3ed7fdd27a95d249c26a8d1bfe3e26e9fab147c0a32c4b0927139cabf11e/68747470733a2f2f7479706f332d6261646765732e6465762f62616467652f7461696c77696e645f7374796c65645f636f6e74656e742f7479706f332f736869656c64732e737667)](https://camo.githubusercontent.com/a9ce3ed7fdd27a95d249c26a8d1bfe3e26e9fab147c0a32c4b0927139cabf11e/68747470733a2f2f7479706f332d6261646765732e6465762f62616467652f7461696c77696e645f7374796c65645f636f6e74656e742f7479706f332f736869656c64732e737667)[![Latest version](https://camo.githubusercontent.com/ec3a6bd83e702a4344a37b490074af5de7581478055b5c31e833a09288375652/68747470733a2f2f7479706f332d6261646765732e6465762f62616467652f7461696c77696e645f7374796c65645f636f6e74656e742f76657273696f6e2f736869656c64732e737667)](https://camo.githubusercontent.com/ec3a6bd83e702a4344a37b490074af5de7581478055b5c31e833a09288375652/68747470733a2f2f7479706f332d6261646765732e6465762f62616467652f7461696c77696e645f7374796c65645f636f6e74656e742f76657273696f6e2f736869656c64732e737667)

Easily use TYPO3 with Tailwind CSS. Tailwind Styled Content is an alternative for `fluid_styled_content` using Tailwind CSS, providing a clean, robust and modern starting point for building websites with TYPO3.

[![TYPO3 + Tailwind CSS](https://private-user-images.githubusercontent.com/81250358/365396616-a2819c93-4682-4e61-9486-03519adad2ad.jpeg?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzQ4OTY5NDAsIm5iZiI6MTc3NDg5NjY0MCwicGF0aCI6Ii84MTI1MDM1OC8zNjUzOTY2MTYtYTI4MTljOTMtNDY4Mi00ZTYxLTk0ODYtMDM1MTlhZGFkMmFkLmpwZWc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjYwMzMwJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI2MDMzMFQxODUwNDBaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1iNDUzZmI2NTFhYjdlNWRlZDE0MDFhYTI3ZjZlMTZjZGQ4NmZmYjc1MjdiYjNhMmJmYzdmZGZkYzQwNTQxMTkyJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.QomOHy7Q9sxL51mONAV8nl8ctiEKcO9J2uvKDAQDJY8)](https://private-user-images.githubusercontent.com/81250358/365396616-a2819c93-4682-4e61-9486-03519adad2ad.jpeg?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzQ4OTY5NDAsIm5iZiI6MTc3NDg5NjY0MCwicGF0aCI6Ii84MTI1MDM1OC8zNjUzOTY2MTYtYTI4MTljOTMtNDY4Mi00ZTYxLTk0ODYtMDM1MTlhZGFkMmFkLmpwZWc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjYwMzMwJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI2MDMzMFQxODUwNDBaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1iNDUzZmI2NTFhYjdlNWRlZDE0MDFhYTI3ZjZlMTZjZGQ4NmZmYjc1MjdiYjNhMmJmYzdmZGZkYzQwNTQxMTkyJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.QomOHy7Q9sxL51mONAV8nl8ctiEKcO9J2uvKDAQDJY8)

What's Included
---------------

[](#whats-included)

### Content Elements

[](#content-elements)

Tailwind Styled Content ships basic templates for (not all) default content elements. Its important to say, that we made some opinionated adjustments and settings. Thats why it is not a drop in replacement for `fluid_styled_content` and is more suitable for new projects.

- Simplified content elements layout
- Removed and added some `frame_class` options
- New `.frame` spacing api
- Overhauled textmedia template and gallery partial
- Removed and added some `imageorient` options
- Disabled the following content elements
    - textpic (in favor of textmedia)
    - table (in favor of RTE table)
    - bullets (in favor of RTE lists)

*Refer to the individual files for more details.*

We’ve also introduced a `Prose` partial, which can be used as follows:

```

```

### Form Elements

[](#form-elements)

We override the default form element classes via YAML, as they were originally designed for Bootstrap. We use the form templates of `version2`.

### Tailwind Plugins and Preset

[](#tailwind-plugins-and-preset)

Tailwind Styled Content comes with a Tailwind preset, a safelist and a plugin, which you can directly import from the composer package. No need for an additional npm package.

The preset extends Tailwind's default theme to better suit TYPO3 websites. It also includes the needed plugins like [daisyUI](https://daisyui.com/), which makes Tailwind usable for non-component-based JS frameworks and [tailwindcss/typography](https://tailwindcss.com/docs/typography-plugin) for RTE and default heading styling.

The Tailwind Styled Content plugin uses the `.frame` class to add robust and flexible spacing to all content elements. The combo classes added by the `space_before_class` and `space_after_class` fields, to adjusts the spacing of individual content elements, look like this: `frame-space-(before|after)-(none|small|large)`. For further customization, check out the [customization section](#customization).

Getting Started
---------------

[](#getting-started)

### 1. Install Tailwind Styled Content (TSC)

[](#1-install-tailwind-styled-content-tsc)

Install it via Composer:

```
composer req jramke/tailwind-styled-content
```

*Note:* For legacy installations, use the Extension Manager in the backend. Make sure to adjust the paths in your Tailwind config.

### 2. Initialize Tailwind

[](#2-initialize-tailwind)

To initialize Tailwind, use PostCSS as recommended. Follow these instructions: [Tailwind CSS Installation using PostCSS](https://tailwindcss.com/docs/installation/using-postcss).

For an easy setup, use `vite-asset-collector` by [Simon Praetorius](https://github.com/s2b) and simply import the your CSS file in your JS entry file. More info here: [Vite Asset Collector](https://github.com/s2b/vite-asset-collector).

### 3. Install Additional Dependencies

[](#3-install-additional-dependencies)

As Tailwind Styled Content relies on `daisyUI` and `@tailwindcss/typography`, you need to install them as development dependencies:

```
npm i -D daisyui@latest @tailwindcss/typography
```

### 4. Set Up Your Tailwind Config

[](#4-set-up-your-tailwind-config)

Add Tailwind Styled Content to your `tailwind.config.js`. You'll need to define the `content` paths and `safelist` yourself, as they’re not merged with the preset.

```
import { preset, safelist } from './vendor/jramke/tailwind-styled-content';

/** @type {import('tailwindcss').Config} */
module.exports = {
    presets: [preset],
    content: [
        './vendor/jramke/tailwind-styled-content/**/*.{html,yaml,typoscript,tsconfig}',
        'packages/**/*.{html,js,yaml,typoscript,tsconfig,xml}',
    ],
    safelist: [...safelist],
}
```

Customization
-------------

[](#customization)

### Tailwind

[](#tailwind)

For basic Tailwind customization, refer to the [Tailwind docs](https://tailwindcss.com/docs/configuration).

### daisyUI

[](#daisyui)

To customize daisyUI, I would recommend [this approach](https://daisyui.com/docs/themes/#-7), where you extend an existing theme with your brand colors. More details are available in the [daisyUI docs](https://daisyui.com/docs/customize/).

### Tailwind Styled Content (TSC)

[](#tailwind-styled-content-tsc)

To customize Tailwind Styled Content, use the `tsc` object in your Tailwind config.

You can tweak the `.frame` component’s CSS by adjusting the default vertical padding, breakpoint-specific padding, and spacing for the combo classes. Set `frame: false` to opt-out of these styles entirely.

The default config looks like this:

```
tsc: {
    frame: {
        default: '2.5rem',
        screens: {
            lg: '3.5rem',
        },
        multipliers: {
            small: '1.5',
            large: '1.5',
        },
    },
}
```

### Tailwind Typography

[](#tailwind-typography)

To customize the typography styles, extend your Tailwind config or override the `Prose.html` partial in your distribution extension. Learn more [here](https://tailwindcss.com/docs/typography-plugin).

Development
-----------

[](#development)

The development setup uses DDEV and is based on this [example](https://github.com/a-r-m-i-n/ddev-for-typo3-extensions).

### Start DDEV Project

[](#start-ddev-project)

```
ddev start
```

### Install JavaScript Dependencies

[](#install-javascript-dependencies)

```
npm install
```

### TYPO3

[](#typo3)

**1. Setup the TYPO3 development environment for the needed version**

```
ddev install-v11
ddev install-v12
ddev install-v13
```

The installations are then available at:

-
-
-

You can log into the backend with username `admin` and password `Password1#`.

**2. Restore base database**

```
ddev snapshot restore dev-base
```

or manually include the Tailwind Styled Content static TypoScript file and add this to the template:

```
page.includeCSS {
    tailwind = output.css
    tailwind {
        disableCompression = 1
        excludeFromConcatenation = 1
    }
}

```

**4. Start the Tailwind CLI build process**

Replace `[VERSION]` with the desired installation version (e.g. `v12`):

```
ddev exec -d /var/www/html/[VERSION] npm run tailwind
```

###  Health Score

37

—

LowBetter than 82% of packages

Maintenance50

Moderate activity, may be stable

Popularity24

Limited adoption so far

Community10

Small or concentrated contributor base

Maturity52

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 85.7% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~28 days

Total

5

Last Release

537d ago

Major Versions

0.0.1 → 1.0.02024-09-07

### Community

Maintainers

![](https://www.gravatar.com/avatar/e300e405a572ea4fe3baa89204dcf113c80d782887acf5051e603ffd84567b85?d=identicon)[jramke](/maintainers/jramke)

---

Top Contributors

[![jramke](https://avatars.githubusercontent.com/u/81250358?v=4)](https://github.com/jramke "jramke (24 commits)")[![xerc](https://avatars.githubusercontent.com/u/1372590?v=4)](https://github.com/xerc "xerc (4 commits)")

---

Tags

fluidfluid-styled-contenttailwindcsstypo3

### Embed Badge

![Health badge](/badges/jramke-tailwind-styled-content/health.svg)

```
[![Health](https://phpackages.com/badges/jramke-tailwind-styled-content/health.svg)](https://phpackages.com/packages/jramke-tailwind-styled-content)
```

###  Alternatives

[fluidtypo3/vhs

This is a collection of ViewHelpers for performing rendering tasks that are not natively provided by TYPO3's Fluid templating engine.

1954.1M48](/packages/fluidtypo3-vhs)[bk2k/bootstrap-package

Bootstrap Package delivers a full configured frontend theme for TYPO3, based on the Bootstrap CSS Framework.

357891.4k72](/packages/bk2k-bootstrap-package)[mask/mask

Create your own content elements and page templates. Easy to use, even without programming skills because of the comfortable drag and drop user interface. Stored in structured database tables. Style your frontend with Fluid tags. Ideal, if you want to switch from Templavoila.

1391.6M10](/packages/mask-mask)[typo3/cms-fluid-styled-content

TYPO3 CMS Fluid Styled Content - Fluid templates for TYPO3 content elements.

228.8M265](/packages/typo3-cms-fluid-styled-content)[helhum/typoscript-rendering

Can render a TypoScript path by URL, especially useful for Ajax dispatching

68653.7k12](/packages/helhum-typoscript-rendering)[sitegeist/fluid-styleguide

Living styleguide for Fluid Components

16227.4k1](/packages/sitegeist-fluid-styleguide)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)