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" />
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 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>
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 use Laravel Mix to compile and extract component css to single file such as app.css. For example I have a component like this:
<template>
<div class="text"> </div>
<template>
...
<style>
.text{ color: red; }
</style>
In webpack.mix.js is:
mix.autoload({
jquery: ['$', 'window.jQuery','window.$'],
quill: ['window.Quill','Quill']
});
mix.options({
extractVueStyles: 'public/css/app.css',
});
mix.js('resources/assets/js/app.js', 'public/js')
.sourceMaps()
.version();
and I put this code in master..blade.php
<link rel="stylesheet" href="{{ url(mix('/css/app.css')) }}">
But app.css is empty and my component css put in html>head as inline style:
<html>
<head>
...
<style>
.text{ color: red; }
</style>
</head>
...
</html>
What should I do to extract and put all component css in app.css?
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