Tailwindcss not taking effect when i use it in html file - html

I have installed tailwindcss using PostCSS. However it's not taking effect when i try to use it to style my html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/dist/output.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Home Page</title>
</head>
Here is the output in tailwind.config.js:
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}

i changed the path to ../dist/output.css
<link href="../dist/output.css" rel="stylesheet">
it is not properly pointing to the right output.css file location

Related

Google fonts not rendering with Tailwind CSS

Having an issue where I'm trying to add in google fonts to a tailwind file, but I cannot for the life of me get it to work. Have followed multiple tutorials and they all show slightly different ways of doing this but none of them work. Have restarted my config file multiple times from scratch and re-done all the HTML & CSS files too.
The weird thing is when I hover over the utility class in the HTML, the popup shows that the class is changing the font family property but it simply doesn't when I refresh the live server.
Here is my HTML & config below:
<!DOCTYPE html>
<html lang="en">
<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 href="/dist/output.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Arvo&family=Inter:wght#200;400;600&display=swap" rel="stylesheet">
<title>Test Website</title>
</head>
<body>
<div class="text-xl font-std">test font 1</div>
<div class="text-xl font-alt">test font 2</div>
</body>
</html>
/** #type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js,css}"],
theme: {
extend: {
fontFamily: {
std: ["Inter", "sans-serif"],
alt: ["Arvo", "serif"],
}
},
},
plugins: [],
}
fontFamily is not child of extend:
try:
theme: {
fontFamily: {
std: ["Inter", "sans-serif"],
alt: ["Arvo", "serif"],
}
},
example: https://play.tailwindcss.com/sEmrhTsuEJ?file=config

html and css not linking

My html and CSS files are not linking even though they're in the same directory.
here's my html code:
<!DOCTYPE html>
<html lang="en">
<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, maximum-scale=1">
<title>temp</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
I also tried using href="/main.css" and href="./main.css" but to no avail.
would appreciate any help!
Use this app.use(express.static('public')); awesome talking to you guys.
<link rel='stylesheet' href='./main.css' />
i don't know why it is not working for you. but it should work!!!
have you tried restarting your app??
try it.
close and then restart.
Try adding this snippet after title block
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

FontAwesome icons not appearing when deploying website to Github

I'm currently using GitHub to host a website. I'm using Font Awesome to get some icons. During testing, everything worked perfectly, but when deploying to Github, the icons disappear.
<!DOCTYPE html>
<html lang="en">
<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">
<title>Document</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css"
integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk"
crossorigin="anonymous">
</head>

CSS won't link to HTML, tried everything

I've tried everything! My CSS file is in my root folder, every HTML file works fine.
<!DOCTYPE html>
<html>
<head>
<title>Kyra Moonrae Art</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
There is a HTML error. Just add > after initial-scale=1.0".

Allow a HTML file which requires external files to be used in Electron

How would you make this HTML file use the css file while being run in electron?
<!DOCTYPE html>
<html>
<head>
<title>First electron html app</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
</head>
</html>
Try this: <link rel="stylesheet" type="text/css" href="styles.css">