TailwindCss ignores custom color configuration with Symfony Encore

Question

TailwindCSS ignores my custom color configuration. I'm using it through Symfony's Webpack Encore bundle.

Here is my config:

$ npm list
├── @symfony/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

// webpack.config.js

const Encore = require('@symfony/webpack-encore');
const PurgeCssPlugin = require('purgecss-webpack-plugin');
const glob = require('glob-all');
const path = require('path');

// Manually configure the runtime environment if not already configured yet by the "encore" command.
// It's useful when you use tools that rely on webpack.config.js file.
if (!Encore.isRuntimeEnvironmentConfigured()) {
    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

Encore
    .setOutputPath('public/build/')
    .setPublicPath('/build')
    .addEntry('app', './assets/app.js')
    .splitEntryChunks()
    .enableSingleRuntimeChunk()
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    .enableVersioning(Encore.isProduction())
    .configureBabel((config) => {
        config.plugins.push('@babel/plugin-proposal-class-properties');
    })
    .configureBabelPresetEnv((config) => {
        config.useBuiltIns = 'usage';
        config.corejs = 3;
    })
    .enablePostCssLoader((options) => {
        options.postcssOptions = {
            'config': './postcss.config.js'
        }
    })
    .autoProvidejQuery()
;

if (Encore.isProduction()) {
    Encore.addPlugin(new PurgeCssPlugin({
        paths: glob.sync([
            path.join(__dirname, 'templates/**/*.html.twig')
        ]),
        defaultExtractor: (content) => {
            return content.match(/[\w-/:]+(?<!:)/g) || [];
        }
    }));
}

module.exports = Encore.getWebpackConfig();

// postcss.config.js

module.exports = {
    plugins: [
        require('tailwindcss'),
    ],
};

And finally the Tailwind config file, placed in the root of the project:

// tailwind.config.js

const colors = require('tailwindcss/colors')

module.exports = {
    theme: {
        colors: {
            transparent: 'transparent',
            current: 'currentColor',
            primary: '#4267B2',
            secondary: '#898F9C',
            ternary: '#F0F2F5'
        }
    }
}

When I run npm run dev or npm run build and I'm using the primary, secondary or ternary colors like <div class="bg-primary"></div>, the color is not loaded or generated by npm. What am I doing wrong?

Answer 1

Specify content section of tailwind.config.js

https://tailwindcss.com/docs/content-configuration