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
Related
My application is using UnoCSS, Nuxt 3 and my Style is using SCSS
One of my components has this style sheet
<style lang="scss">
.tag {
#apply shadow hover:shadow-lg hover:-translate-y-0.5 no-underline
capitalize border-b border-transparent rounded px-2 py-1 m-1 inline-block; //line is ignored
#apply bg-brand-supporting hover:border-gray-400 text-white;
}
</style>
Which works perfectly when running "nuxt dev", however, as soon as I deploy it, the rounding as well as padding is noticeable missing, while the hover shadow is working.
What is responsible for the multi-line #apply to work / to not work and how do I make it working?
After further tryouts it turns out only one #apply per CSS selector is allowed, but neither WebStorm complains, nor the build fails or anything.
As far as I remember, multiple #apply's worked with TailwindCSS and might be an issue with UnoCSS if I'm not mistaken.
Anyway, this works
.tag {
#apply shadow hover:shadow-lg hover:-translate-y-0.5 no-underline
capitalize border-b border-transparent rounded px-2 py-1 m-1 inline-block
bg-brand-supporting hover:border-gray-400 text-white;
}
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 trying to build a dropdown with tailwind CSS(v2.2.15) group and group-hover classes. It works fine when I use them in HTML directly. But when I use it in custom class with #apply it doesn't work.
Custom classes:
.dropdown-container {
#apply group inline-block relative;
}
.dropdown-list {
#apply absolute
hidden
-left-16
top-0
rounded-lg
text-sm
group-hover:block;
}
but if I use the group in HTML directly it works fine. I also extend the group hover for display in tailwind.config.js
tailwind.config.js
variants: {
extend: {
display: ['group-hover']
}
},
Is it possible to use this feature in custom class
This doesn't answer your exact question, but tailwind provide a huge bunch of pre-built components you can just cut and paste to save reinventing the wheel: https://tailwindcomponents.com/components/dropdowns
I had issues using group-hover inside #apply, so i just used vanilla css
.parent-class:hover .child-class {
#apply your-tailwind-classes
}
If you want to use custom classes when using group-hover inside the template:
in css file
#tailwind utilities;
#layer utilities {
.hover-small { #apply your--tailwind-classes; // or normal css }
.hover-large { #apply your--tailwind-classes; // or normal css }
}
in html just use group-hover with these custom utilities
<span class="handle transition duration-300
rounded-full group-hover:custom-hover-small">
</span>
In my case i needed dynamic class depending on the size prop
<span class="handle transition duration-300 rounded-full"
:class="`group-hover:hover-${size}`">
</span>
but for that to work i had to add these specific classes in tailwind.config.js safelist so its pre-generates it
safelist: ['group-hover:hover-small', 'group-hover:hover-large'],
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