Tailwind Vite Setup

gistfile1.txt

npm init @vitejs/app

code .

echo "# pb-oct-2022" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin git@github.com:jordanlambrecht/pb-oct-2022.git
git push -u origin main

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest @tailwindcss/aspect-ratio @tailwindcss/forms @tailwindcss/typography @tailwindcss/line-clamp --save-dev

npx tailwindcss init -p

mkdir dist src src/components src/css assets assets/img assets/fonts

delete content of main.js

@tailwind base;
@tailwind components;
@tailwind utilities;

move style.css and main.js to src



//tailwind.config.js template

const { colors } = require('tailwindcss/defaultTheme');

module.exports = {
  purge: ['./src//index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      colors:{
        teal: colors.teal,
        cyan: colors.cyan,
        orange: colors.orange,
        tan: "#D9C2b3",
      },
      backgroundImage: {
             'hero-bergen': "url('assets/img/bergen.jpeg')",
        // +         'footer-texture': "url('/img/footer-texture.png')",
                }
    },
  },
  variants: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
    require('@tailwindcss/line-clamp'),
  ],
}


//end tailwind template

Add to main.js:
import "./css/typefaces.css";
import "./css/tailwind.css";