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

Copy files from repository to ./themes/TailwindTheme
Install Encore
```
composer require encore
```

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

Create postcss config file

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

Create Tailwind config file
```
npx tailwind init
```

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];

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'

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

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

sbarbat/SyliusTailwindTheme

Sylius Tailwind Theme

Installation