TA-Gallery - Getting started

To add TA-Gallery to you website you have at least two ways. The prefered way is to use the Tailwind CSS plugin together with Purge CSS.

The other option is to use a CDN for script and styles. The good thing is you can combine both. So you might end up with the Tailwind CSS plugin as part of your build process and for the TA-Gallery script you can use the CDN link.

The best way: Tailwind CSS Plugin

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: Add the plugin to your Tailwind CSS config file. Learn more about the Tailwind CSS plugin .

// tailwind.config.js
module.exports = {
// ...
plugins: [
// ...

You can find the TA-Gallery javascript source file in ./node_modules/@markusantonwolf/ta-gallery/src/scripts/ta-gallery.js so you can copy it into your own script folder or include the path into your build process. If you want to include the babelified and minified version use this one: ./node_modules/@markusantonwolf/ta-gallery/dist/js/ta-gallery.min.js.

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],
// ...
// ...

Alpine.js version 3 support

  • Production build: /dist/js/ta-gallery-next.min.js
  • Working / Develoment build. /src/scripts/ta-gallery-next.js
<!-- into <head> -->
<link href="https://unpkg.com/tailwindcss@^2.0/dist/tailwind.min.css" rel="stylesheet">
<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
<link href="https://unpkg.com/@markusantonwolf/ta-gallery@latest/dist/css/ta-gallery.css" rel="stylesheet">

<!-- at the end of <body> -->
<script src="https://unpkg.com/@markusantonwolf/ta-gallery@latest/dist/js/ta-gallery-next.min.js"></script>

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>

Learn more about how to configure TA-Gallery plugin and include or sync the files with your build process - check out the Tailwind CSS plugin documentation.

Webpack 4 and Tailwind 3 > Issue > Fix

Issue: Webpack does not include taGallery. Adding require('@markusantonwolf/ta-gallery') to the plugin section in tailwind.config.js seems to be is not enough.

A helpfull solution might be to add the following code to the main.js file.

import taGallery from '@markusantonwolf/ta-gallery/dist/js/ta-gallery-next';

Thanks to Jako | GitHub for the solution -> GitHub Issue solved

The function taGallery is added to the window object. This solves a major issue with webpack, gulp or other bundler tools. Read more about this issue here .

The fastest way: Not for production

The other way to start with Tailwind CSS, Alpine JS and TA-Gallery is to use a CDN for everything.

To start the fastest way using Tailwind CSS and Alpine JS is from a CDN. Put the following links into your head section of your html source code. Please be sure you use the “defer” attribute for Alpine JS in the script tag. This attribute makes sure that Alpine JS gets executed right after loading.

<!-- into <head> -->
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
<link href="https://unpkg.com/@markusantonwolf/ta-gallery@latest/dist/css/ta-gallery.css" rel="stylesheet">

<!-- at the end of <body> -->
<script src="https://unpkg.com/@markusantonwolf/ta-gallery@latest/dist/js/ta-gallery.min.js"></script>

CodePen example

To start even faster you can use my CodePen example and play around with it. This example uses the latest version of the CDN scripts and styles.

Tailwind CSS

I strongly recommend using Tailwind CSS and Purge CSS in your build process. Adding TA-Gallery to your Tailwind CSS configuration is very easy.

The TA-Gallery Tailwind CSS plugin generates all utilities for you. If you don’t want to use the plugin you can use the pre-rendered and minified CSS utilities from the /dist folder or via CDN.

TA Styled Plugins Logo
Explore all TA Styled Plugins and learn how to enhance your website fast and easy. All TA Styled Plugins stand for light-weight, responsive, mobile first and 100% customizable with endless animation options and are based on Tailwind CSS and Alpine JS.

TA Styled Plugins are licensed under the MIT license, see LICENSE for details.

Copyright © 2019-2022 Markus A. Wolf - www.markusantonwolf.com

Imprint | Privacy