Sylius Tailwind Theme

Sylius Tailwind theme with build process based on Webpack Encore.

It allows to swap to Tailwind-based theme separately in each channel.

This theme is under development, feel free to help building the tailwind views! 😁

Installation

1. Copy files from repository to ./themes/TailwindTheme

2. Install Encore

   composer require encore
   

3. Install node dependencies

   yarn
   yarn add --dev @symfony/webpack-encore sass-loader node-sass tailwindcss autoprefixer postcss-loader webpack-notifier purgecss-webpack-plugin glob-all lodash path
   

4. Create postcss config file

   # ./postcss.config.js
   module.exports = {
       plugins: [
           require('tailwindcss'),
           require('autoprefixer'),
       ]
   }
   

5. Create Tailwind config file

   npx tailwind init
   

6. Import tailwind-theme config in the main webpack file

   # ./webpack.config.js
   
   const Encore = require('@symfony/webpack-encore');
   const tailwindTheme = require('./themes/TailwindTheme/webpack.config');
   module.exports = [tailwindTheme];
   

7. Edit project config files

   # ./config/packages/assets.yaml
   
   framework:
       assets:
           packages:
               bootstrapTheme:
                   json_manifest_path: '%kernel.project_dir%/public/tailwind-theme/manifest.json'  
   

   # ./config/packages/webpack_encore.yaml
   
   webpack_encore:
       output_path: '%kernel.project_dir%/public/tailwind-theme'
   

8. To build the assets, run one of the following commands

   # compile assets once
   yarn encore dev      
   
   # recompile assets automatically when files change
   yarn encore dev --watch
   
   # recompile assets automatically with live reload
   yarn encore dev-server
   
   # create a production build
   yarn encore production
   

9. Change theme in the admin panel by visiting the Edit Channel page