Published on

TYPO3, Symfony Encore, Webpack & Tailwind CSS

Authors

Let’s take a look at how to combine Tailwind CSS with Symfony Encore (Webpack) for TYPO3 projects.

Install dependencies

composer require symfony/webpack-encore-bundle --dev
npm init -y
npm install -D tailwindcss postcss autoprefixer @symfony/webpack-encore
npx tailwindcss init -p

Project structure

assets/
  css/app.css
  js/app.js
webpack.config.js
tailwind.config.js
postcss.config.js

Tailwind setup

tailwind.config.js:

module.exports = {
  content: ['./templates/**/*.html', './Resources/Private/**/*.html'],
  theme: { extend: {} },
  plugins: [],
}

assets/css/app.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

Encore (Webpack) config

webpack.config.js:

const Encore = require('@symfony/webpack-encore')

Encore.setOutputPath('public/build/')
  .setPublicPath('/build')
  .addEntry('app', './assets/js/app.js')
  .enablePostCssLoader()
  .enableSingleRuntimeChunk()

module.exports = Encore.getWebpackConfig()

assets/js/app.js:

import '../css/app.css'
// Add your JS here

Build assets

npm run build
# or npm run dev --watch

Integrate in TYPO3 Fluid templates

<f:asset.css identifier="app" href="/build/app.css" />
<f:asset.script identifier="app" src="/build/runtime.js" />
<f:asset.script identifier="app_entry" src="/build/app.js" />

Alternatively, include tags directly or use the AssetCollector depending on your TYPO3 version.

Tips

  • Purge CSS is handled via the Tailwind content option; ensure all template paths are covered
  • Split entries if you need separate bundles (frontend/backend)
  • In production, enable versioning/fingerprinting and long-term caching

That’s it — you’ve wired Tailwind CSS and Symfony Encore into your TYPO3 project.