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.
Related
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 😇
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.
I'm trying to fit an iframe inside a div using tailwind, but I cannot figure out how to make the iframe responsive.
What kind of class do I need to use to make for example the following to work?
<div class="min-h-screen bg-gray-50 py-6 flex flex-col justify-center relative overflow-hidden sm:py-12">
<img src="/img/beams.jpg" alt="" class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-w-none" width="1308" />
<div class="absolute inset-0 bg-[url(/img/grid.svg)] bg-center [mask-image:linear-gradient(180deg,white,rgba(255,255,255,0))]"></div>
<div class="relative px-6 pt-10 pb-8 bg-white shadow-xl ring-1 ring-gray-900/5 sm:max-w-lg sm:mx-auto sm:rounded-lg sm:px-10">
<iframe src="https://www.geogebra.org/calculator/zsnkxfmw?embed" width="800" height="600" allowfullscreen="" style="border: 1px solid #e4e4e4;border-radius: 4px;" frameborder="0"></iframe>
</div>
</div>
There is a official plugin https://github.com/tailwindlabs/tailwindcss-aspect-ratio
// tailwind.config.js
module.exports = {
theme: {
// ...
},
corePlugins: {
aspectRatio: false,
},
plugins: [
require('#tailwindcss/aspect-ratio'),
// ...
],
}
Or You Can Refer To https://tailwindcss.com/docs/aspect-ratio
i have two buttons, blue and red.
i want to set when red button is clicked/focused blue button should also turn red.
how can i achieve it using tailwind css.
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet"/>
<button class="focus:bg-red-700 bg-red-400 font-bold px-4 py-4 rounded-lg">
RED
</button>
<button class=" bg-blue-400 font-bold px-4 py-4 rounded-lg">
BLUE
</button>
Tailwind don't has the css combinators. Guess, you have two way to achieve this.
Create an extra css file and add this line
button.bg-red-400:focus ~ button.bg-blue-400 {
background-color: rgba(185, 28, 28, 1);
}
button.bg-red-400:focus~button.bg-blue-400 {
background-color: rgba(185, 28, 28, 1);
}
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet" />
<button class="focus:bg-red-700 bg-red-400 font-bold px-4 py-4 rounded-lg">RED</button>
<button class="bg-blue-400 font-bold px-4 py-4 rounded-lg">BLUE</button>
You can create your own custom class with #Variants documentation, but not with a link from CDN.
Before using the CDN build, please note that many of the features that make Tailwind CSS great are not available without incorporating Tailwind into your build process. documentation
Solution with javascript
// Select all elements with `bg-blue-400` class
const blueBox = document.querySelectorAll('.bg-blue-400');
const changeColor = ev => {
// Define button in the DOM
const button = ev.target.closest('button');
// Check, if the button was clicked
if (button) {
// Chenge color in the DIVs
for (const box of blueBox) {
box.classList.add('bg-red-400');
box.classList.remove('bg-blue-400');
}
return;
}
// If clicked outside, the color will switch back
for (const box of blueBox) {
box.classList.add('bg-blue-400');
box.classList.remove('bg-red-400');
}
};
document.addEventListener('click', changeColor);
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet" />
<div>
<button class="one bg-red-400 font-bold px-4 py-4 rounded-lg">RED</button>
<div class="bg-blue-400 font-bold px-4 py-4 rounded-lg">BLUE</div>
</div>
<div class="two bg-blue-400 font-bold px-4 py-4 rounded-lg">APPLY COLOR HERE</div>
I'm new in Tailwind CSS. I build to the user interface of nextjs application by starting "mobile first" like everybody. Flex direction, background color are working at mobile size screen. So tailwind css is correctly importing nextjs application. When change the screen size, not change to flex direction or background color of navigation bar.
Navbar code is shared below:
export default function Home() {
return (
<div>
<Head>
<title>Tailwind CSS Tutorial</title>
<meta name="description" content="Generated by create next app" />
<meta name="viewport" content="width=device-width, initial-scale=1"></meta>
<link rel="icon" href="/favicon.ico" />
</Head>
<main>
<header className="bg-gray-700 shadow-md sm:bg-red-900">
<nav className="flex flex-col items-center sm:flex-row sm:justify-between sm:items-left">
<div className="w-screen text-center px-5 py-2 text-white border-b sm:border-b-0 sm:w-auto">
W3Learn
</div>
<div className="py-2">
<a className="px-10 text-white" href="/html-lecture"> HTML</a>
<a className="px-10 text-white" href="/css-lecture"> CSS </a>
<a className="px-10 text-white" href="/js-lecture"> JS </a>
</div>
</nav>
</header>
</main>
</div>
)
}
tailwind configuration is shared below:
module.exports = {
mode: "jit",
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
darkMode: false,
theme: {
extend: {},
screens: {
},
},
variants: {
extend: {},
},
plugins: [],
}
Cause of problem is missing breakpoints configuration. I add the below breakpoints
configuration lines in screens. Actually, this lines are coming default and though missing lines, this app must be running without error.
'sm': '640px',
// => #media (min-width: 640px) { ... }
'md': '768px',
// => #media (min-width: 768px) { ... }
'lg': '1024px',
// => #media (min-width: 1024px) { ... }
'xl': '1280px',
// => #media (min-width: 1280px) { ... }
'2xl': '1536px',
// => #media (min-width: 1536px) { ... }