TA-GalleryIntroduction
Getting started
Examples
Basic Structure
Configuration
Predefined CSS
Functions
Transitions
Accessibility
Tailwind CSS Plugin
Links
TA-Pagination
TA-Foodtrucks
TA-Analytics
TA-YouTubeTA-Styled-Plugins
TA-Gallery
TA-Pagination
TA-Foodtrucks
TA-Analytics
TA-YouTube
TA-Gallery
TA-Pagination
TA-Foodtrucks
TA-Analytics
TA-YouTubeThe 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.
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-galleryInside 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: [
require('@markusantonwolf/ta-gallery')
]
// ...
}
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.
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],
},
// ...
},
// ...
}
/dist/js/ta-gallery-next.min.js/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>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.
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 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>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.
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 are licensed under the MIT license, see LICENSE for details.
Copyright © 2019-2022 Markus A. Wolf - www.markusantonwolf.com