I just started learning Tailwind CSS, all day long I'm trying to understand why space-x-n not working for me
I searched everywhere on Google but no luck
this is my code:
<nav class="bg-gray-800">
<div class="max-w-7xl mx-auto">
<div class="flex justify-between">
<div class="flex space-x-4">
<div>
<a href="#">
<img src="/src/logo.png" style="height:40px;" alt="logo">
</a>
</div>
<div>
Features
Pricing
</div>
</div>
<div>secondary nav</div>
</div>
</div>
</nav>
this is my app.css
#tailwind base;
#tailwind components;
#tailwind utilities;
config file
const defaultTheme = require('tailwindcss/defaultTheme');
/** #type {import('tailwindcss').Config} */
module.exports = {
content: [
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
'./resources/js/Pages/*.vue',
],
theme: {
extend: {
fontFamily: {
sans: ['Nunito', ...defaultTheme.fontFamily.sans],
},
},
screens:{
sm: '480px',
md: '768px',
lg: '976px',
xl: '1440px'
}
},
plugins: [require('#tailwindcss/forms')],
};
Inspect your generated markup and if there's no space-x-4, there might be an error in your build step. It's also possible that this file isn't part of the configured tailwind content files.
You're markup looks correct. Both gap-x-4 and space-x-4 should provide a 16px gap between the two contained divs.
You can give the first div containing the logo a mr-4 margin as workaround.
See https://tailwindcss.com/docs/gap#changing-row-and-column-gaps-independently
Related
I followed these instructions exactly:
https://tailwindcss.com/docs/installation
but the dropdown that's supposed to look like this:
https://tailwindui.com/components/application-ui/elements/dropdowns
still looks like garbage:
https://i.imgur.com/uViQHdu.png
I installed Tailwind and used init:
https://imgur.com/nGWspSt
I filled in the "tailwind.config.js" like this:
tailwind.config.js
/** #type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/components/DropdownVue/DropdownVue.vue"], <---INCLUDED DROPDOWN FILE
theme: {
extend: {},
},
plugins: [],
};
I created an "index.css" and imported the Tailwind modules in it like this:
index.css
#tailwind base;
#tailwind components; <-----INCLUDED IMPORTS
#tailwind utilities;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Noto Serif", serif, Ariel, Helvetica, sans-serif;
background: #d7d7d7;
}
img {
width: 100%;
object-fit: contain;
}
#import url("https://fonts.googleapis.com/css2?family=Noto+Serif&display=swap");
I started the build process and got an "output.css" file
https://i.imgur.com/mOKDwuc.png
that I included in my "index.html" file like this:
<link href="/dist/output.css" rel="stylesheet">
and at that point you are supposed to be done and your Tailwind components should be working according to those instructions.
BUT, they didn't work and I then found a more specific page for installing Tailwind with Vue + Vite:
https://tailwindcss.com/docs/guides/vite
and the directions are pretty much the same, only it says to npm install like this:
npm install -D tailwindcss postcss autoprefixer
and previously I only installed "tailwindcss". So I ran the install on the other 2 packages hoping that would fix it, but it didn't.
What part did I get wrong here? Can someone help me fix this?
This is all the relevant code again:
tailwind.config.js
/** #type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/components/DropdownVue/DropdownVue.vue"], <---INCLUDED FILE
theme: {
extend: {},
},
plugins: [],
};
index.css
#tailwind base;
#tailwind components; <-----INCLUDED IMPORTS
#tailwind utilities;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Noto Serif", serif, Ariel, Helvetica, sans-serif;
background: #d7d7d7;
}
img {
width: 100%;
object-fit: contain;
}
#import url("https://fonts.googleapis.com/css2?family=Noto+Serif&display=swap");
App.vue
<template>
<NavBar :clicked="clicked" #toggleDrawer="toggleMenu()" />
<BackDrop :clicked="clicked" />
<SideDrawer :clicked="clicked" />
<router-view></router-view>
</template>
<style>
#import "./index.css"; <-------IMPORTED STYLES
</style>
DropdownVue.vue (THE TAILWIND COMPONENT IM TRYING TO USE)
<template>
<Menu as="div" class="relative inline-block text-left">
<div>
<MenuButton
class="inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-100"
>
Options
<ChevronDownIcon class="-mr-1 ml-2 h-5 w-5" aria-hidden="true" />
</MenuButton>
</div>
<transition
enter-active-class="transition ease-out duration-100"
enter-from-class="transform opacity-0 scale-95"
enter-to-class="transform opacity-100 scale-100"
leave-active-class="transition ease-in duration-75"
leave-from-class="transform opacity-100 scale-100"
leave-to-class="transform opacity-0 scale-95"
>
<MenuItems
class="absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
>
<div class="py-1">
<MenuItem v-slot="{ active }">
<a
href="#"
:class="[
active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
'block px-4 py-2 text-sm',
]"
>Account settings</a
>
</MenuItem>
<MenuItem v-slot="{ active }">
<a
href="#"
:class="[
active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
'block px-4 py-2 text-sm',
]"
>Support</a
>
</MenuItem>
<MenuItem v-slot="{ active }">
<a
href="#"
:class="[
active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
'block px-4 py-2 text-sm',
]"
>License</a
>
</MenuItem>
<form method="POST" action="#">
<MenuItem v-slot="{ active }">
<button
type="submit"
:class="[
active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
'block w-full px-4 py-2 text-left text-sm',
]"
>
Sign out
</button>
</MenuItem>
</form>
</div>
</MenuItems>
</transition>
</Menu>
</template>
<script setup>
import { Menu, MenuButton, MenuItem, MenuItems } from "#headlessui/vue";
import { ChevronDownIcon } from "#heroicons/vue/20/solid";
</script>
The content property in your tailwind.config.js should be:
content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",
],
I'm trying to setup tailwind. When I use classnames of flex I expect the flex css property to show up in the element styles. All other element styles show up, but the flex related ones don't. This is in a new react app. Why is this happening? I setup tailwind using the tailwind cli with npx.
<div className="flex flex-row justify-between mx-auto bg-gray-200 shadow border p-8 m-10">
<h1> Trending </h1>
<h1> My Faves </h1>
</div>
my index.css file has the
#tailwind base;
#tailwind components;
#tailwind utilities;
Is flex not a part of tailwind or something?
I have used your code, and i don't see error in there:
my pakage.js file:
{
"name": "option-1",
"version": "0.1.0",
},
"dependencies": {
"autoprefixer": "^9.6.5",
"react": "16.10.2",
"react-dom": "16.10.2",
"tailwindcss": "3.0.24"
}
}
my taidwind.css file:
#tailwind base;
#tailwind components;
#tailwind utilities;
.scrollbar-none {
scrollbar-width: none;
}
.scrollbar-none::-webkit-scrollbar {
display: none;
}
my index.js file:
const Index = () => (
<div className="flex flex-row justify-between mx-auto bg-gray-200 shadow border p-8 m-10">
<h1> Trending </h1>
<h1> My Faves </h1>
</div>
);
export default Index;
You could replace your css file with this file:
tailwind css codesandbox file
I had got the same problem. Not all the classes were automatically come to the css file. I tried to solve by reinstalling but didn't work.
I've recently started working with Tailwindcss/Next.js and I want to give a button a box-like shadow with a new utility with pure CSS. But for some reason, it doesn't apply the changes. Have I forgotten something?
index.jsx:
...
<button className="text-xl font-bold italic cursor-pointer border-textwhite
border-2 w-52 bg-primary h-10 uppercase box-shadow-black">
Buy Now
</button>
...
index.css:
#tailwind base;
#tailwind components;
#tailwind utilities;
#layer utilities {
.box-shadow-black {
box-shadow: 0.125rem 0.125rem 0 0px #000;
}
}
It works but you have small bugs: border-textwhite insted of this: text-red-500 and conflict border and border-2 i left border-2 and added more shadow 0.2rem to display effect better! Also remember about how to install tailwindcss with next.js.
Good Luck ;-)
index.js
import Head from "next/head";
export default function Home() {
return (
<div>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<div className="flex items-center justify-center h-screen flex-col gap-5">
<button className="text-xl font-bold italic cursor-pointer text-red-500 border-2 w-52 bg-primary h-10 uppercase box-shadow-black">
Buy Now
</button>
</div>
</div>
);
}
globals.css
#tailwind base;
#tailwind components;
#tailwind utilities;
#layer utilities {
.box-shadow-black {
box-shadow: 0.2rem 0.2rem 0.2rem 0px black;
}
}
output :
"next": "12.0.7","react": "17.0.2","tailwindcss": "^3.0.5"
I am using Tailwind CSS with Next.js, and want to show progress bar in below url.
https://www.tailwind-kit.com/components/progress
The code is below:
<div>
<div class="bg-white rounded-lg w-72 shadow block p-4 m-auto">
<div class="w-full h-2 bg-gray-400 rounded-full mt-3">
<div class="w-3/4 h-full text-center text-xs text-white bg-green-500 rounded-full">
</div>
</div>
</div>
</div>
However, If I check browser, the bar is not displayed and the height of the div element is 0.
I checked in Chrome and Safari, and the result was the same in both.
I want to know how to show the empty div element in browser.
--Update:
I have solved the above problem by removing the height customize from tailwind.config.js.
module.exports = {
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
darkMode: false, // or 'media' or 'class'
theme: {
// removed this
height: {
main: '681px'
},
},
variants: {
extend: {},
},
plugins: [],
}
However, I don't know why the height customize caused this problem, does anyone know about it?
you could use grow Property:
<div class="grow w-3/4 h-full ....">
I have been struggling trying to make TailwindCSS work with Angular. I followed some tutorials and looked in the documentation of Tailwind. For some reason in certain places in the Angular 9 application it's working and in lazy loaded modules it's not (so it seems)!
So first thing I did was following and implementing these tutorials:
https://dev.to/seankerwin/angular-8-tailwind-css-guide-3m45
https://dev.to/beavearony/building-tailwind-css-in-an-angular-cli-project-e04
I know for sure I have these installed correctly because of the following:
My sidebar(app-sidebar) is having the correct css and styling! But the page I'm on loaded through the is not.
I will provide you with my app-routing.module, and the default layout and the dashboard component. On this Dashboard the tailwindCSS is not loading. (Funny thing: if I add an H1 element with no class, no nothing I see this element on the dashboard page!) The other elements which contain some kind of tailwindCSS class don't. Also if I drag-and-drop through the content of my dashboard component to outside this dashboard component I see my elements, although without any styling. (I do this with Chrome DevTools)
app-routing.module.ts
{
path: 'login',
loadChildren: () => import('./modules/login/login.module').then(m => m.LoginModule)
},
{
path: '',
redirectTo: 'dashboard',
pathMatch: 'full',
},
{
path: '',
component: DefaultLayoutComponent,
children:[
{
path: 'dashboard',
loadChildren: () => import('./modules/dashboard/dashboard.module').then(m => m.DashboardModule)
}
]
},
{ path: '**', redirectTo: '' }
];
default-layout.component.html
<div class="h-screen flex overflow-hidden bg-gray-100">
<app-sidebar></app-sidebar>
<div id="content">
<router-outlet></router-outlet>
</div>
</div>
dashboard.component.html
<h1>Dashboard</h1>
<div class="flex flex-col w-0 flex-1 overflow-hidden">
<div class="md:hidden pl-1 pt-1 sm:pl-3 sm:pt-3">
<button class="-ml-0.5 -mt-0.5 h-12 w-12 inline-flex items-center justify-center rounded-md text-gray-500 hover:text-gray-900 focus:outline-none focus:bg-gray-200 transition ease-in-out duration-150" aria-label="Open sidebar">
<svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</button>
</div>
<main class="flex-1 relative z-0 overflow-y-auto pt-2 pb-6 focus:outline-none md:py-6" tabindex="0">
<div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
<h1 class="text-2xl font-semibold text-gray-900">Dashboard</h1>
</div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
<!-- Replace with your content -->
<div class="py-4">
<div class="border-4 border-dashed border-gray-200 rounded-lg h-96"></div>
</div>
<!-- /End replace -->
</div>
</main>
</div>
The following I have tried but no succes:
ViewEncapsulation (How to get Angular's <router-outlet> to work with CSS Grid)
Added on each page a link to the CDN with tailwindCSS
Does it maby has any thing to do with the lazy loaded module?
Or maby that there is a double router-outlet?
Because this is how my app.component.html looks
<router-outlet></router-outlet>
So I have figured it out. There were actually two things left I had to do.
First was to set the tailwindcss configuration (tailwind.config.js) and attach it to tailwindcss with the help of my webpack.config.js
module.exports = {
module : {
rules: [
{
test : /\.scss$/,
loader : 'postcss-loader',
options: {
ident : 'postcss',
syntax: 'postcss-scss',
plugins: () => [
require('postcss-import'),
require('tailwindcss')('./tailwind.config.js'),
require('autoprefixer')
]
}
}
]
}
};
Second thing I had to do was putting the overall class of the component to the host in my Angular Component.
dashboard.component.ts
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.scss'],
host: {
class: "flex flex-col w-0 flex-1 overflow-hidden"
}
})
export class DashboardComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}
So looking back at my question and looking at the dashboard.component.html file, the highest div is removed and the class of that div is placed in host! Like above.
I have followed the first link in my question!