This bash will help setup TailwindCSS on your Nuxt2 Project

tail4nuxt2.sh

#!/bin/bash
# This bash will help setup Tailwind on your Nuxt2 Project
# Created by: 🐼 UDB - aeadedoyin.com

# Install Tailwind CSS and its peer dependencies
yarn add -D tailwindcss postcss autoprefixer npx

# Add the Tailwind directives to your CSS
mkdir -p ./assets/css
echo "
/* Remove if unneeded */
@tailwind base;
@tailwind components;
@tailwind utilities;
" >> ./assets/css/tailwind.css

# Import the CSS file
echo "
// Remove if unneeded
/*
  css: [
    '@/assets/css/tailwind.css',
  ],
*/
" >> nuxt.config.js

# Add the build block to PostCSS configuration in nuxt.config.js
echo "
// Remove if unneeded
/*
  build: {
    postcss: {
      postcssOptions: {
        plugins: {
          tailwindcss: {},
          autoprefixer: {},
        },
      },
    },
  },
*/
" >> nuxt.config.js

# Configure your template paths
touch tailwind.config.js
echo "
// Remove if unneeded
/*
export default {
  content: [
    './components/**/*.{js,vue,ts}',
    './layouts/**/*.vue',
    './pages/**/*.vue',
    './plugins/**/*.{js,ts}',
    './nuxt.config.{js,ts}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
*/
" >> tailwind.config.js

echo "
Update the following where applicable
  1. ./tailwind.config.js
  2. ./nuxt.config.js
  3. ./assets/css/tailwind.css

  🚀 Create magic!
  ✨ UDB.
"