TA-Foodtrucks - Getting Started

TA-Foodtrucks gives you at least two ways to add food truck and street food dates to your page. The prefered way is to use the Tailwind CSS plugin.

The best way: Tailwind CSS Plugin

From npm: Install the package.

# Install using npm

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

# Install using yarn

yarn add -D @markusantonwolf/ta-foodtrucks

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-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.

The function taFoodtrucks 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

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>

CodePen example

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.

Tailwind CSS

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