TA-Gallery - Tailwind CSS Plugin

Using the Tailwind CSS plugin is a perfect and very comfortable way to customize the TA-Gallery.

Since version 2.X you can find TA-Gallery as an installable package on NPM: TA-Gallery .

From npm: Install the package.

# Install using npm

npm install --save-dev @markusantonwolf/ta-gallery

# Install using yarn

yarn add -D @markusantonwolf/ta-gallery

Inside tailwind.config.js

To use the Tailwind CSS plugin you have to add it to your Tailwind CSS config file: tailwind.config.js.

// tailwind.config.js
module.exports = {
    // ...
    theme: {
        // ...
        taGallery: {
            animations: [
                'swing', 
                'swipe', 
                'slide', 
                'rotate', 
                'snake', 
                'window', 
                'scroll'
            ],
            animation_default: 'slide', // default value
            aspect_ratios: [
                'wide', 
                'hd', 
                'super', 
                'common', 
                'modern', 
                {
                    instagram: 3 / 5
                }
            ],
        },
        // ...
    },
    variants: {
        // ...
        taGallery: ['responsive'], // default value
        extend: {
            // ...
        },
    },
    plugins: [
        // ...
        require('@markusantonwolf/ta-gallery'), // add the TA-Gallery plugin here
        // ...
    ],
};

Theme

You can control which animations and aspect ratios are generated as utilities by modifying the following properties in the theme section of your tailwind.config.js file.

Add a taGallery object with your configuration to the theme object.

animations : Array - Define all animations you want to be generated as utilities. You can find a list of all available animations in Transitions . On this page you will also find an introduction on how to add your own slide effects .

animation_default : String - Define the default slide animation. You can find a list of all available animations in the Transitions documentation.

aspect_ratios : Array - Define all aspect ration utilities you want to be generated as utilities. You can find a list of all supported aspect ratios in Predefined CSS . If you want to define your own aspect ratio utility you can simply add it as an object to the array. The key will be used as a name and with the value you can define the aspect ratio.

// tailwind.config.js
module.exports = {
    // ...
    theme: {
        // ...
        taGallery: {
            animations: [
                'swing', 
                'swipe', 
                'slide', 
                'rotate', 
                'snake', 
                'window', 
                'scroll'
            ],
            animation_default: 'slide', // default value
            aspect_ratios: [
                'wide', 
                'hd', 
                'super', 
                'common', 
                'modern', 
                {
                    instagram: 3 / 5
                }
            ],
        },
        // ...
    },
    // ...
};

Variants

You can control which variants are generated as utilities by modifying the following property in the variants section of your tailwind.config.js file.

taGallery : Array - Feel free to add more Tailwind CSS variants to the array. By default the plugin generates all responsive variants. If you want to learn more about all Tailwind CSS variants you should check out the official Tailwind CSS documentation: Configuring Variants .

// tailwind.config.js
module.exports = {
    // ...
    variants: {
        // ...
        taGallery: ['responsive'], // default value
        extend: {
            // ...
        },
    },
    // ...
};

Purge CSS with Tailwind CSS

If you use Purge CSS to optimize your CSS files you have to add the following class names to your whitelist / safelist.

// tailwind.config.js

const ta_gallery_safelist = require('./node_modules/@markusantonwolf/ta-gallery/src/plugin/safelist');

module.exports = {
    purge: {
        // ...
        options: {
            safelist: [...ta_gallery_safelist],
        },
        // ...
    },
    // ...
}

Tailwind JIT compiler limitations

Working with the new Tailwind CSS JIT compiler is a great experience and is lightning fast but the compiler does have some limitations. The most important for TA-Gallery is the not yet supported whitelist options. TA-Gallery needs this whitelist to run smoothly. But there is an easy workaround:

Use this safelist.txt file and store it in the root of your project folder -> FIXED!

An alternative approach is to add the following classes somewhere in your project and render it only in development mode.

<div class="ta-gallery-element-active ta-gallery-anim-right-in ta-gallery-anim-right-out ta-gallery-anim-left-in ta-gallery-anim-left-out"></div>

Previous Accessibility Next Links

Last updated

17. May 2022

Reading Time

~ 3 minutes

Contents