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"
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 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
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 use webpack5, typescript, tailwindcss and storybook to make an Button UI component, I modify the example code from storybook to tailwindcss
Here is the css code:
#tailwind base;
#tailwind components;
#tailwind utilities;
#layer components {
.storybook-button {
#apply font-sans font-bold border-none rounded-3xl cursor-pointer inline-block leading-3;
}
.storybook-button--primary {
#apply text-white bg-[#1ea7fd];
}
.storybook-button--secondary {
#apply text-[#333] bg-[]
color: #333 bg-transparent shadow-cyan-500/50;
}
.storybook-button--small {
#apply text-xs px-4 py-2;
}
.storybook-button--medium {
#apply text-sm px-5 py-3;
}
.storybook-button--large {
#apply text-base px-6 py-3;
}
}
But when I run yarn storybook, this css file is not working
Button in storybook with tailwindcss
This problem gave me headaches too. I followed every solution that can be found on StackOverflow and Github.
But I only could "fix it" by running the tailwind-CLI and building the global.css file and importing it to ./storybook/preview.js
here's the cli command used.
npx tailwindcss -i ./src/styles/global.css -o ./.storybook/global.css --watch
then import it from the output path (-o flag) in the command above.
// ./storybook/preview.js
import './global.css';
...rest of your preview config
I have app.css file like
#tailwind base;
#tailwind components;
#import url('features/login/login.css');
#tailwind utilities;
In login.css code like
.login-button {
#apply w-full flex justify-center border border-transparent;
}
body {
background-color: red !important;
}
The rule for body works, but for the login-button does not
How I can create own css class based on tailwind classe in our css files?
Thanks
update: added html file (it Aurelia-framework template)
Original template
<template>
<span class="login-button-wrapper">
<button type="submit" class="login-button">
Sign in
</button>
</span>
</template>
Fixed template
<template>
<require from="./login.css"></require>
<span class="login-button-wrapper">
<button type="submit" class="login-button">
Sign in
</button>
</span>
</template>
If you use PostCSS, you just need to change the import line to this
#import "features/login/login.css";.
Also, make sure that you have the postcss-import plugin connected.
https://tailwindcss.com/docs/using-with-preprocessors/#build-time-imports.
You can write your style under your tailwind assets
#tailwind base;
#tailwind components;
#tailwind utilities;
.login-button {
#apply w-full flex justify-center border border-transparent;
}
body {
background-color: red !important;
}
like this, if prefer using the file you can also use the
directive before that you need to make sure you have installed
npm install postcss-import
#import url("path");
or
#import "path";
You need to check if the path is correct and rebuild your app again this will work
Best guide I found so far
#tailwind base;
#tailwind components;
#tailwind utilities;
// Base
#layer base {
#import "base/variables";
#import "base/elements";
}
...
https://bloggie.io/#kinopyo/organize-your-css-in-the-tailwind-style-with-layer-directive