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
}}>
Related
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 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 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?
Lets assume I have two routes which require two different css as follows.
/home
needs
<head>
<link rel="stylesheet" href="/home.css">
</head>
And
/dashboard
needs
<head>
<link rel="stylesheet" href="/dashboard.css">
</head>
I can't put both css in same head file as they are conflicting. I can't do something as below.
<head>
<link rel="stylesheet" href="/home.css">
<link rel="stylesheet" href="/dashboard.css">
</head>
Is there any way to put different css for different route's in head?
Note: I need css in head to avoid glitch.
You can use different layouts for the two routes.
<template name="css1">
<head>
<link rel="stylesheet" href="/dashboard.css">
</head>
<div class="main">
{{> yield}}
</div>
</template>
and
<template name="css2">
<head>
<link rel="stylesheet" href="/home.css">
</head>
<div class="main">
{{> yield}}
</div>
</template>
and use it in the layout option for the route like:
this.route('path to css1', {
path: '/',
layoutTemplate: 'css1',
template: "css1 template"
});
Or alternatively:
You could do:
<template name="layout">
<head>
{> yield region="css"}}
</head>
<div class="main">
{{> yield}}
</div>
</template>
and
this.route('path to css1', {
path: '/',
layoutTemplate: 'layout',
template: "css1 template"
yieldTemplates: {
'temple having css1': {to: 'css'}
}
});
Meteor compiles all your CSS in a way similar to Rails' asset pipeline.
Your question is coming from a non-single page app mindset.
You can put different stylesheets for different pages, in a multiple page site. But how will this work for an app that is only one page?
Instead, you should scope your style rules.
IE, instead of .container { color: blue }, do something like .container .home-container { color: blue }.