I haven't found a solution that works. I followed the steps on the Tailwind installation page. I've linked everything. I know that Tailwind is being applied to the index.html since the font is different and I'm able to style the background color of the header. But that's all that has worked so far. If I try to add any additional classes (ex. flex, font-weight), to the header or anything else, there's no change.
My HTML head and header:
<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="./assets/css/dist/output.css" rel="stylesheet">
<link href="./assets/css/src/input.css" rel="stylesheet">
<title>Room-3</title>
</head>
<body>
<!-- Class "flex" isnt working -->
<header class=" flex bg-slate-400">
<h1>Room-3</h1>
<p id="what-we-do">What We Do</p>
<button>Get Started</button>
</header>
<script src="./tailwind.config.js"></script>
</body>
My tailwind.config.js
/** #type {import('tailwindcss').Config} */
module.exports = {
content: ["./"],
theme: {
extend: {},
},
plugins: [],
}
My input.css:
Note: #tailwind is red and underlined in each instance, so I suspect the problem has something to do with this file
#tailwind base;
#tailwind components;
#tailwind utilities;
It is supposed to work fine.If the background is working then the rest should work as well
There may be mistakes in the class names.
Try this code:
<header class="flex items-center justify-around bg-slate-400">
<h1 class="">Room-3</h1>
<p id="what-we-do">What We Do</p>
<button class="text-2xl">Get Started</button>
</header>
The output goes like:
As far as all the classes you mentioned i.e. flex, bg-slate-400 all are working. This means that tailwind css is installed properly on your system.
To watch flex is working, you can add flex-col or justify-evenly to give flex a direction.
However if you add font-weight , this will not work as it is not any class, you can add font-bold, font-medium,.. will work.
A working example is given below
<script src="https://cdn.tailwindcss.com"></script>
<header class="flex justify-evenly bg-slate-300">
<h1 class="font-extrabold">Room-3</h1>
<p id="what-we-do">What We Do</p>
<button class="font-extralight">Get Started</button>
</header>
Related
I'm currently trying to use classes in Tailwind that contain {n} (e.g. grid-rows-{n}).
However, these classes are not written in my compiled css.
Tailwind Config:
/** #type {import('tailwindcss').Config} */
module.exports = {
mode: 'jit',
content: [
"./dist/**/*.html"
],
theme: {
extend: {},
},
plugins: []
}
My Css file:
#tailwind base;
#tailwind components;
#tailwind utilities;
My HTML File:
<!doctype html>
<html lang="de">
<head>
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body class="p-3">
<div class="grid grid-rows-16 grid-cols-4">
<div class="border-b border-black border-solid">
Test
</div>
<div class="border-r border-black border-solid row-start-2">
</div>
<div class="border-b border-r border-black border-solid row-start-3">
Test 2
</div>
</div>
</body>
</html>
Command: npx tailwindcss -i ./style.css -o ./dist/style.css --watch
Everything except grid-rows-16 works.
Many thanks for help in advance.
As specified here, TailwindCSS classnames need to exist as complete strings for it to be compiled properly. As so, you cannot use grid-rows-{n}. You can, however, conditionally select the classname:
<div class={conditional === "whatever" ? 'grid-rows-8' : 'grid-rows-16'}>
Or use the style attribute:
<div style="grid-template-rows: {{ n }}"></div>
You haven't specified what framework you're using, but with React a potential solution with inline styles would be:
<div style={{
gridTemplateRows: n
}}>
I have done absolutely everything from the documation, and I have searched and tried everything three times while trying to fix this beautiful tailwind but still, no success. Some classes just won't work. I a have the config file and the html, css files in the same folder.
/** #type {import('tailwindcss').Config} */
module.exports = {
content: ["./index.html"],
theme: {
extend: {},
},
plugins: [],
}
<link rel="stylesheet" href="./tailwind/output.css" />
<link rel="stylesheet" href="styles.css" />
<div class="flex w-screen h-auto justify-center">
<div class="flex flex-row flex-wrap gap-[20px]"> <-- not working
<div class="w-[200px] border-2 border-white">Div1</div> <-- not working
<div class="w-[200px] border-2 border-white">Div2</div> <-- not working
<div class="w-[200px] border-2 border-white">Div3</div> <-- not working
</div>
</div>
styles.css:
#tailwind base;
#tailwind components;
#tailwind utilities;
#apply won't work
also ran
npx tailwindcss -i styles.css -o ./dist/output.css --watch
The stylesheet is not in the right folder:
npx tailwindcss -i styles.css -o ./dist/output.css --watch
👆
👇
<link rel="stylesheet" href="./tailwind/output.css" />
Change
<link rel="stylesheet" href="./tailwind/output.css" />
to
<link rel="stylesheet" href="./dist/output.css" />
I have trouble getting tailwind to work. I use it without any other framework or depency, just with static html and Js.
Tailwind.css is the compiled css, and contains the styles I need, I can also see that it is loaded by the browser, but the styles are not applying to my HTML. I'm probably missing something really obvious here.
Sample HTML file :
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="./css/tailwind.css" />
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<title>Cantus Manager</title>
</head>
<body>
<div class="messe">
<p class="text-red-600">Date :</p>
<p>date</p>
<p>Entrée :</p>
<p>entree</p>
</div>
</body>
Sample of tailwind.css
...
.text-red-600 {
--tw-text-opacity: 1;
color: rgb(220 38 38 / var(--tw-text-opacity));
}
...
I'm working on a react js project where I'm using the mdbootstrap, I'm trying to build a component similar to this
the first picture is for desktop and another is for mobile users
So, I was trying to achieve something similar and I started playing with bootstrap classes but couldn't achieve this in my react project. But to my surprise in my project, the columns are not taking full width. Why is it happening and what can I do?
Here's it working fine in normal HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<!-- Google Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.15.0/css/mdb.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-8" style="background-color: red;">
One of two columns
</div>
<div class="col-sm-4" style="background-color: yellow;">
One of two columns
</div>
</div>
</div>
</body>
</html>
Check this code on JsFiddle.
Here's the link for my react js project and the component is profile.js you can check it through navbar: https://codesandbox.io/s/dawn-flower-iqcuz
Here's what I'm getting
This is what I want
Your example code is right so it does not help in solving the problem.
I suspect that you used right class container-fluid (max-width: 100% - 100% of the parent not 100% of the viewport) but this wrapper is placed in another div with a class container (max-width: 1200px).
If so your container-fluid is limited by container and behaves like it because max-width:100% is equal 1200px.
I'm trying to use bootstrap4 with create-react-app. I realized bootstrap.min.css was missing so I put the following line in index.html in the public folder
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"
integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ"
crossorigin="anonymous">
I tried using a card and the colors were missing.
<div className="card card-inverse card-primary mb-3 text-center">
<div className="card-block">
<blockquote className="card-blockquote">
React.js
</blockquote>
</div>
</div>
If I then typed a letter in the like
<head>s
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"
integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ"
crossorigin="anonymous">
The the card color would show. If I then remove the letter and hit save the color disappeared. What is going on here?
Actually i don't know what should i see on page, but i can help you with live editor which uses create-react-app. I did same thing for you and get some nice view on screen sandbox link