Tailwind CSS for Symfony with Webpack Encore!

This pack makes it easy to use Tailwind CSS with Symfony's Webpack Encore Bundle.

If you don't use Symfony Flex, its interest is limited to requiring necessary packages but you must configure your project files manually.

It's an implementation of the tutorial available on the Tailwind CSS site.

Note

Want to use Tailwind CSS with AssetMapper Component instead? Check out the TailwindBundle Docs.

Installation

Install the pack & configure your app with three commands:

composer require fastfony/tailwind-webpack-encore-pack
npm install tailwindcss @tailwindcss/postcss postcss postcss-loader
npm run watch

If you use Flex that's it! This will create a postcss.config.mjs file and make sure your assets/styles/app.css contains the Tailwind directives.

If you don't use Symfony Flex, you need to create the postcss.config.mjs file manually in the root of your project with the following content:

// postcss.config.mjs
export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

Add the Tailwind directives to your assets/styles/app.css file:

/* assets/styles/app.css */
@import "tailwindcss";
@source not "../../public";

And enable PostCSS in your webpack.config.js file:

// webpack.config.js
Encore
  .enablePostCssLoader()
;

Done!

Usage

You need to run the npm run watch command:

npm run watch

That's it! This will watch for changes to your assets/styles/*.css and templates/* files and automatically recompile it when needed.

You can use Tailwind CSS classes in your Twig templates and CSS files.

Deploying

When you deploy, just run the npm run build:

npm run build

Requirement of fastfony/webapp-webpack-encore-pack

The repository fastfony/webapp-webpack-encore-pack is similar to the official symfony/webapp-pack but it requires Webpack Encore necessary packages instead of AssetMapper.