Edward's Tech Site
this site made with Next.js 13, see the code
FORAY: Jul 17, 2023 - CSS
Learn the basics of Tailwind
- todo
- install HTML/CSS
- install Vite Vanilla TypeScript
- install React TypeScript
- for each
- with @apply
- with SCSS mixin
- history
- attempting install of Vite Vanilla site with Tailwind
- C:\ggg\202407workshops\et009-vite-vanilla-tailwind
npm create vite- TypeScript
- first doing standard docs
npm install -D tailwindcss postcss autoprefixernpx tailwindcss init- creates tailwind.config.js
- add postcss.config.js file:
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}
- converted to ES6 module
- tailwind.config.js
content: ['./src/**/*.{ts}'],
- add
@tailwind base;
@tailwind components;
@tailwind utilities;
- didn't work
- doing Add Tailwind CSS to Your Vite and Vanilla JS Project
- simple and didn't work
- installed with react - default -- WORKED
- installed React with TypeScript -- WORKED
- installing Vite-Vanilla JavaScript -- WORKED
- installing Vite-Vanilla TypeScript
- install
- HTML/CSS
- Vite Vanilla
- React
- create custom styles
- use with SCSS
- work through cheatsheets
- %% was able to install Tailwind in Vite Vanilla, it's explained in the Tailwind installation