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.
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 - Overhaul of the 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)
Check the individual files for more information.
We also introduce a Prose
partial that can be used like this:
<f:render partial="Prose" contentAs="content">
<!-- content -->
</f:render>
We override the default form element classes via yaml, because they where designed to work with Bootstrap. Currently the gridrow element is not ported to tailwind yet. We use the form templates of version2
.
Tailwind Styled Content comes with a tailwind preset, a safelist which you can directly import from the composer package.
The preset extends the default tailwind theme to make it more suitable for building TYPO3 websites rather than web app interfaces. It also includes the needed plugins. Tailwind Styled Content includes daisyUI plugin which makes tailwind usable for non-component-based JS frameworks and tailwindcss/typography plugin to enhance the RTE and default heading styling.
The Tailwind Styled Content plugin enhances the .frame
component, which is used for each content element. It adds robust spacing to your elements, which also can be adjusted by the combo classes applied by the space_before_class
and space_after_class
fields in the backend. The combo classes pattern looks like this: frame-space-(before|after)-(none|small|large)
. For customization details, you can read more in the customization section
Install Tailwind Styled Content via Composer.
ddev composer req jramke/tailwind-styled-content
NOTE: If you are using a legacy installation you have to install the extension via the extension manager in the backend. Remember to adapt the paths in the generated tailwind config to your setup.
Then, you need to initialize Tailwind. The recommended way is to use PostCSS. Follow the steps here: Tailwind CSS Installation using PostCSS.
The easiest way to get your main.css
running is using vite-asset-collector
, a great extension from Simon Praetorius. Then you simply need to import the css file in your js entry file. Read more here: Vite Asset Collector.
As mentioned, Tailwind Styled Content is based on daisyUI
and @tailwindcss/typography
So we need to install them as dev dependencies as well.
npm i -D daisyui@latest @tailwindcss/typography
Now you have to add Tailwind Styled Content to your tailwind.config.js
. You have to set the content
paths and safelist
yourself, because these values arent 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}',
],
safelist: [...safelist],
}
For basic Tailwind customization you can simply follow the Tailwind docs.
For customizing daisyUI i would recommend this approach, where we extend an existing theme with the needed brand colors, because we often dont need dark and light mode for simple websites. For more information check out their docs.
For customizing Tailwind Styled Content you can use the tsc
object in your Tailwind config.
You can adjust the generated CSS for the .frame
component by changing the default vertical padding, the default padding for a given Tailwind breakpoint and the amount of increase or decrease when using the combo classes. If you set frame: false
you can opt-out for the styles and use your own.
The default config looks like this:
tsc: {
frame: {
default: '2.5rem',
screens: {
lg: '3.5rem',
},
multipliers: {
small: '1.5',
large: '1.5',
},
},
}
For customizing the typography styles you can simply extend your tailwind config or override the Prose.html
partial in your distribution extension and add the desired element modifiers or other classes. Read more here.