TA-Foodtrucks - Tailwind CSS plugin

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: [
                'wide', 
                'hd', 
                'super', 
                'common', 
                'modern', 
                {
                    instagram: 3 / 5
                }
            ],
        },
        // ...
    },
    // ...
    variants: {
        // ...
        taYoutube: ['responsive'], // default value
        extend: {
            // ...
        },
    },
    // ...
    plugins: [
        require('@markusantonwolf/ta-youtube')({
            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.

Variants

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.