Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Tailwind Vite Setup
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";
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment