https://github.com/baybreezy/advanced-homes
Advanced Homes UI w/ NuxtJs3 + TailwindCSS
https://github.com/baybreezy/advanced-homes
Last synced: 2 months ago
JSON representation
Advanced Homes UI w/ NuxtJs3 + TailwindCSS
- Host: GitHub
- URL: https://github.com/baybreezy/advanced-homes
- Owner: BayBreezy
- License: mit
- Created: 2022-04-14T18:51:15.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2025-02-01T14:31:58.000Z (4 months ago)
- Last Synced: 2025-02-01T15:30:47.802Z (4 months ago)
- Language: Vue
- Size: 1.64 MB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# NuxtJS3 + TailwindCSS Setup
This repo just shows how to get a simple landing page up and running with NuxtJS V3 and TailwindCSS.
- [NuxtJS](https://nuxtjs.org/)
- [TailwindCSS](https://tailwindcss.com/)
- [Pexels](https://www.pexels.com/)
# Demo
https://advanced-homes.behonbaker.com/
## Steps
[x] : Create Nuxt App with command
```bash
npx nuxi init nuxt3-app
```
[x] : Install TailwindCSS
```bash
npm install -D tailwindcss postcss autoprefixer && npx tailwindcss init
```
[x] : Add postcss config to your `nuxt.config.ts`
```js
export default defineNuxtConfig({
// ...
postcss: {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
},
//...
});
```
[x] : Add Content paths to you `tailwind.config.js`
```js
module.exports = {
// ...
content: [
"./components/**/*.{js,vue,ts}",
"./layouts/**/*.vue",
"./pages/**/*.vue",
"./plugins/**/*.{js,ts}",
"./nuxt.config.{js,ts}",
],
// ...
};
```
[x] : Create main CSS file and add it to your `nuxt.config.ts`
```bash
mkdir -p assets/css && touch assets/css/main.css
```
```js
export default defineNuxtConfig({
// ...
css: ["~/assets/css/main.css"],
//...
});
```
[x] : Add tailwind to CSS file
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```
[x] : Install Tailwind CSS VS Code extension
https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss
## Next Steps
Create your landing page and start building your app.