TailwindCss ignores custom color configuration with Symfony Encore

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

Here is my config:

$ npm list
├── @symfony/webpack-encore@1.7.0
├── core-js@3.20.2
├── glob-all@3.2.1
├── jquery-ui@1.13.0
├── jquery@3.6.0
├── path@0.12.7
├── postcss-loader@6.2.1
├── purgecss-webpack-plugin@4.1.3
├── regenerator-runtime@0.13.9
├── tailwindcss@2.2.19
└── webpack-notifier@1.15.0

// 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?