I followed the tutorial perfectly and made a website while using the live server extension and it was applying. I use Chrome, Edge and Opera to check the .html file itself but no style was applied in the matter of fact it still shows as applied in the live server extension
The files
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="/dist/output.css" rel="stylesheet" />
</head>
<body class="m-0 bg-blue-500 p-0">
<nav class="m-0 h-full w-full space-x-4 border bg-blue-400 p-6">
<h1 class="text-3xl font-bold drop-shadow-md md:filter-none">
Safer Internet
</h1>
<div
class="absolute top-7 right-14 space-x-10 stroke-2 font-extrabold hover:stroke-black"
>
<button
class="position inline-block text-right duration-700 hover:text-white"
>
Home
</button>
<button
class="position inline-block text-right duration-700 hover:text-white"
>
More
</button>
<button
class="position inline-block text-right duration-700 hover:text-white"
>
About
</button>
</div>
</nav>
<div>
<p
class="absolute left-64 top-2/4 translate-x-2/4 translate-y-2/4 text-center text-xl font-bold"
>
To be able to know how to be safe on the internet click the button
bellow.
</p>
<div
class="relative top-96 flex translate-y-2/3 items-center justify-center text-center"
>
<button
class="relative top-9 w-1/6 rounded-xl bg-blue-900 p-4 font-extrabold duration-700 hover:bg-black hover:text-white"
>
More
</button>
</div>
</div>
</body>
</html>
tailwind.config.js:
module.exports = {
content: ["./src/**/*.{html,js}", "./public/*.html"],
theme: {
extend: {},
},
plugins: [],
}
style.css:
#tailwind base;
#tailwind components;
#tailwind utilities;
I tried everything and it didn't work and I expected the styles to apply on my browser.
Proper approach to follow when using Tailwind-CLI
1. Know about your file structure. Use:
public
|_ tailwind_base.css
👆 File from which the output.css is produced
#tailwind base;
#tailwind components;
#tailwind utilities;
|_ output.css
src
|_ index.html
👆 Link with the output.css using
<link href="../public/output.css" rel="stylesheet" />
Watch it as
npx tailwindcss -i ./public/tailwind_base.css -o ./public/output.css --watch
Specify your html/js in tailwind.config.js
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
};
Use tailwindcss classes happily in your index.html file 😇
Related
I started learning Tailwind framework by following the "From Zero to Production" series on thier official youtube channel but I'm stacking in #apply which it doesn't work at all and Vscode keep showing me a warning "Unknown at rule #apply".
I've read the docs on thier site and everything is ok and nothing different.
here are the configurations and my code :
tailwind.config.js
/** #type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
package.json
{
"name": "tailwind",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "vite"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^10.4.13",
"postcss": "^8.4.20",
"tailwindcss": "^3.2.4",
"vite": "^4.0.0"
}
}
style.css
#tailwind base;
#tailwind components;
#tailwind utilities;
#layer components {
.btn {
#apply inline-block px-5 py-3 rounded-lg focus:outline-none focus:ring focus:ring-offset-2 uppercase tracking-wider font-semibold text-sm sm:text-base;
}
.btn-primary {
#apply bg-indigo-500 text-white hover:bg-indigo-400 focus:ring-indigo-500 focus:ring-opacity-50 active:bg-indigo-600;
}
.btn-secondary {
#apply bg-gray-300 text-gray-800 hover:bg-gray-200 focus:ring-gray-300 focus:ring-opacity-50 active:bg-gray-400;
}
}
index.html
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="styleshee" href="style.css" />
<script src="https://cdn.tailwindcss.com"></script>
<title>Document</title>
</head>
<body class="bg-gray-600">
<div class="bg-gray-100 grid lg:grid-cols-2">
<div class="p-8 py-12 max-w-md mx-auto sm:max-w-xl lg:max-w-full">
<h3 class="">Workation</h3>
<img src="./coffee-bg10.jpg"
class="mt-6 rounded-lg shadow-xl lg:hidden" alt="just an img"/>
<h1 class="mt-6 text-2xl font-bold text-gray-900 sm:mt-8 lg:text-4xl">You can work from anywhere.<br> <span class="text-indigo-500">Take advantage of it.</span></h1>
<p class="mt-2 text-gray-600">Lorem ipsum dolor, sit amet consectetur adipisicing elit. ccusamus repudiandae sapiente. Repepsam laudantium fugiat at unde. Facere, voluptates quidem!</p>
<div class="mt-6">
Book your Escape
or here
</div>
</div>
<div class="hidden lg:block relative">
<img src="./coffee-bg10.jpg"
class="absolute inset-0 w-full h-full object-cover object-center" alt="just an img"/>
</div>
</div>
</body>
</html>
Your css file needs to go through a compilation process using the command npx tailwindcss -i ./src/style.css -o ./dist/style.css. It doesn't look like you're doing it.
Also, when you install tailwind as a dependency in an npm project, you don't need to import the tailwind cdn with <script src="https://cdn.tailwindcss.com"></script>, because all your styles must be generated on your machine.
Whenever I delete something off of the css for the card component and readd it, it works but whenever I restart my project, it stops working.
I've already tried adding the html directory file to the content section of the tailwind.config file.
What it is supposed to look like:
How it is looking:
In src/index.css:
#import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
#tailwind base;
#tailwind components;
#tailwind utilities;
In src/app.js:
import { BrowserRouter } from "react-router-dom";
import { HashLink as Link } from "react-router-hash-link";
import Header from "./pages/Header";
import About from "./pages/About";
import Resume from "./pages/Resume";
import Projects from "./pages/projects";
import Contact from "./pages/Contact";
import Card from "./card/card"
function App() {
return (
<BrowserRouter>
<Header/>
<About/>
<Resume/>
<Card
img = "./img/resume.png"
title = "Resume"
description = "d resume"
button = "download"
/>
<Projects/>
<Contact/>
</BrowserRouter>
)
}
export default App;
In src/card/card.jsx:
import React from "react";
export default function Card(props) {
return (
<div class="min-h-screen bg-orange-100 " className="card">
<div
class="w-60 p-2 bg-white rounded-xl transform transition-all hover:-translate-y-2 duration-300 shadow-lg hover:shadow-2xl"
className="card_body"
>
<img class="h-40 object-cover rounded-xl" src={props.img} />
<div class="p-2"></div>
<h2 class="font-bold text-lg mb-2 " className="card_title">
{props.title}
</h2>
<p class="text-sm text-gray-600" className="card_description">
{props.description}
</p>
<div class="m-2">
<button
class="text-white bg-sky-500 px-3 py-1 rounded-md hover:bg-purple-700"
className="card_btn"
>
{props.button}
</button>
</div>
</div>
</div>
);
}
In tailwind.config.js:
/** #type {import('tailwindcss').Config} */
module.exports = {
purge: ["*"],
content: ["./src/**/*.{js,jsx,ts,tsx}", "./*/*.html"],
theme: {
extend: {
fontFamily: {
inter: "Inter",
},
},
},
plugins: [],
};
It looks like you never import the CSS file. Try adding import "./index.css" in the src/App.js file
I got it to work when I got rid of all of the "className" on ./card/card but I am not sure why.
Sorry this may be badly described but will try to describe this as best as I can:
What I'm trying to do is put so the Redux dropdown menu dropdown element is an element in the menu (next to about/Signout as shown in the below screenshot).
For some reason the dropdown element is not coming up at all in the menu, but does work in the index file.
The code for the menu is below,
Dropdown.js
import * as DropdownMenu from '#radix-ui/react-dropdown-menu';
export default function dropdownUserProfileMenu (){
return (
<>
<DropdownMenu.Root>
<DropdownMenu.Trigger className='trigger'>Settings</DropdownMenu.Trigger>
<DropdownMenu.Content>
<DropdownMenu.Item>New Item</DropdownMenu.Item>
<DropdownMenu.Item>New Item 2</DropdownMenu.Item>
<DropdownMenu.Item>New Item 3</DropdownMenu.Item>
<DropdownMenu.Item>New Item 4</DropdownMenu.Item>
</DropdownMenu.Content>
</DropdownMenu.Root>
</>
)
};
Menu.js
<div className='w-screen mr-3 h-16 drop-shadow-md rounded-sm bg-white'>
<div className='container px-4 md:px-0 h-full mx-auto flex justify-between items-center shadow-md'>
<div className='text-primaryBlack'>
<Link href='/'><p className='pl-4'>Student sharing site</p></Link>
</div>
<div>
<ul id='menuElements' className={`right-0 px-10 py-16 text-primaryBlack z-50 flex mx-auto flex-row space-x-4 items-center`}>
<Link href='/about'><li>About</li></Link>
<li><dropdownUserProfileMenu></dropdownUserProfileMenu></li>
<Link href='/api/auth/signout'><li onClick={e => {
e.preventDefault()
signOut()
}}>Signout</li>
</Link>
</ul>
</div>
</div>
</div>
// </div>
(Ignore the signin/signout methods, am using NextAuth specifically but this is not needed to get this working)
Hope helping for this is possible!
I develop on windows using nextjs, but when I view my websites from a mac they always appear much smaller in font size, padding, margin, everything.
An example that's online is cspros
With screenshots, this is another one viewed on windows in chrome
and this is on a mac using chrome and it's also the same size on a chromebook
The CSS that controls my sizing is
.responsive {
#apply max-w-6xl mx-auto
}
And is the github of that project
with the code of my homepage below
<div className="min-h-screen w-full bg-[#FFFAEC]">
<Head>
<title>Computer Science Professionals</title>
<link rel="icon" href="/favicon.ico" />
</Head>
{/* navbar */}
<Header home active="/" />
{/* Hero and CTA button */}
<main className="responsive flex space-x-20 pt-40">
<div className="">
{/* Comment */}
<div className="flex items-center space-x-2 text-[0.7rem] text-accent-default">
<CheckCircleIcon className="h-5 w-5" />
<p>"This site is how I got a 9" - Harry Russin</p>
</div>
{/* Slogan and smaller text*/}
<div className="">
<h1 className="my-5 text-4xl font-bold">
The <span className="text-[#3F51DC] hover:text-purple-400">best</span> resources and
<br /> activities just for you.
</h1>
<h3 className="text-lg leading-6 text-gray-600">
Make learning enjoyable again with coding
<br /> exercises, interactive flashcards, whole
<br /> class games and much more!
</h3>
</div>
{/* buttons */}
<div className="z-20 mt-12 flex items-center space-x-5 text-xs">
<Link href={'/login'}><button className="heroButton py-4 px-5">Start your Journey</button></Link>
<div className="flex items-center space-x-3">
<Link replace href={'https://csnewbs.com'}>
<ChevronDoubleRightIcon className="heroButton box-content h-4 w-4 rounded-full py-4 px-4" />
</Link>
<p className="font-semibold text-[#3734A9]">
See our partner website - CSNewbs.com
</p>
</div>
</div>
</div>
<div className="z-10 mt-12 -rotate-[14deg]">
<img src="/questoblue.png" alt="blue questo" className="scale-125" />
{/* header image */}
</div>
</main>
</div>
This is probably really simple but I can't figure out it is so any help is appreciated
I have a navbar and I want that when someone clicks on the button, it will be open with transition in tailwindcss.
const bar_btn = document.getElementById('BAR-BTN');
const mobileMenu = document.getElementById('mobileMenu')
bar_btn.addEventListener(
'click',
function() {
mobileMenu.classList.toggle('w-0')
mobileMenu.classList.toggle('h-0')
}
)
<nav>
<div>
<button id='BAR-BTN'><i class="fas fa-bars fa-2x"></i></button>
</div>
<ul class="transition-transform ease-linear h-0 w-0 delay-1000 duration-1000"
id="mobileMenu">
<li>test-1</li>
<li>test-2</li>
<li>test-3</li>
</ul>
</nav>
This is my HTML and javascript code and it doesn't work.
I could not find a way to give transition to height property(which we can in pure css) so i used scale to give a transition effect
See if it helps
const bar_btn = document.getElementById('BAR_BTN');
const mobileMenu = document.getElementById('mobileMenu')
bar_btn.addEventListener('click',function()
{
mobileMenu.classList.toggle('transform');
}
);
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet"/>
<nav>
<div>
<button id="BAR_BTN" class="px-10 py-2 mt-10 mx-10 w-1/4 hover:bg-green-300 bg-green-200 transition-all">button</button>
</div>
<ul id="mobileMenu" class="mx-10 p-5 border-4 border-black overflow-hidden text-xl w-1/4 origin-top duration-300 scale-y-0" >
<li>Test-1</li>
<li>Test-2</li>
<li>Test-3</li>
</ul>
</nav>
I have the same problem just now and I solve it.
// .tsx
navigationRef.current?.classList.toggle('active');
<div ref={navigationRef} className=' w-[80px] ... duration-500 transition-all ' />
// index.css
#tailwind base;
#tailwind components;
#tailwind utilities;
#layer components {
.active {
width: 300px !important;
}
}
The effect as follow:
No need scale and the effect may be not as expected.