TA-Gallery
TA-Pagination
TA-FoodtrucksIntroduction
Getting Started
Examples
Basic Structure
Configuration
Predefined CSS
Functions
Tailwind CSS plugin
Links
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-YouTubeFrom npm: Install the package.
# Install using npm
npm install --save-dev @markusantonwolf/ta-foodtrucks
# Install using yarn
yarn add -D @markusantonwolf/ta-foodtrucksInside 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-foodtrucks')
]
// ...
}
You can find the TA-Gallery javascript source file in ./node_modules/@markusantonwolf/ta-foodtrucks/src/scripts/ta-foodtrucks.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 compiled and minified version use this one: ./node_modules/@markusantonwolf/ta-foodtrucks/dist/js/ta-foodtrucks.min.js.
To start the fastest way using Tailwind CSS and Alpine JS is from a CDN. Put the following code into your html source code. Please be sure you use the “defer” attribute in your script tag. This attribute makes sure that the code 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-foodtrucks@latest/dist/styles/ta-foodtrucks.css" rel="stylesheet">
<!-- at the end of <body> -->
<script src="https://unpkg.com/@markusantonwolf/ta-foodtrucks@latest/dist/scripts/ta-foodtrucks.min.js"></script>To start even faster you can use the CodePen example. I prepared a Pen with TA-Foodtrucks so you can play around and change the layout or structure. 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-Foodtrucks to your Tailwind CSS configuration is very easy.
The TA-Foodtrucks 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.
TA Styled Plugins are licensed under the MIT license, see LICENSE for details.
Copyright © 2019-2022 Markus A. Wolf - www.markusantonwolf.com