TA-Foodtrucks - Tailwind CSS plugin

Using the Tailwind CSS plugin is a perfect and very comfortable way to start with TA-YouTube and to customize your component.

You can find TA-YouTube as an installable package on NPM: TA-YouTube .

From npm: Install the package.

# Install using npm

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

# Install using yarn

yarn add -D @markusantonwolf/ta-youtube

Inside tailwind.config.js

Add the plugin to your Tailwind CSS config file.

// tailwind.config.js
module.exports = {
    // ...
    theme: {
        // ...
        taYoutube: {
            aspect_ratios: [
                    instagram: 3 / 5
        // ...
    // ...
    variants: {
        // ...
        taYoutube: ['responsive'], // default value
        extend: {
            // ...
    // ...
    plugins: [
            respectPrefix: true, // respect prefix option in config: true (default) | false 
            respectImportant: true, // respect important option in config: true (default) | false 
    // ...

Theme aspect ratios

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.


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

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 .

Plugin options

The TA-YouTube Tailwind CSS plugin supports some options for the build process.

respectPrefix: false- If you not want to respect your prefix in the tailwind configuration you should pass this option to the plugin.

respectImportant: true- If you don’t want to configure all TA-YouTube utilities as important then you have to pass this options to the plugin.

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