Stack Overflow
Stack Overflow

Questions tagged [tailwind-css]

Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

A utility-first CSS framework for rapidly building custom user interfaces.

Documentation

Tailwind CSS scans your project for class names and generates a static CSS file. This static file is designed to be very efficient as Tailwind CSS only generates the CSS you are using in your project.

For full documentation, visit tailwindcss.com.

Community

For help, discussion about best practices, or any other conversation that would benefit from being searchable:

Discuss Tailwind CSS on GitHub

For casual chit-chat with others using the framework:

Join the Tailwind CSS Discord Server

8046 questions
310
votes
23 answers

How to add a @tailwind CSS rule to CSS checker

Tailwind CSS adds a @tailwind CSS at rule which is flagged as unknown. How can I avoid this error? For example, styles.css @tailwind preflight; @tailwind utilities;
Steve Lee
  • 5,191
  • 5
  • 17
  • 18
154
votes
2 answers

How to use calc() in tailwind CSS?

I have this html:
I have set the .navBar's height to h-7. Now I want to set .content-container's height to…
kob003
  • 2,206
  • 2
  • 12
  • 19
128
votes
13 answers

Vertical align with Tailwind CSS across full screen div

How can I vertically align a div with Tailwind? What I want: ----------------------------------- | | | | | | | item1 | | …
ajthinking
  • 3,386
  • 8
  • 45
  • 75
118
votes
26 answers

Error: PostCSS plugin tailwindcss requires PostCSS 8

I installed the new tailwindcss version 2.0 and I've got the following error. I tried to uninstall postcss and tailwindcss but it does not work. Need help. Module build failed (from ./node_modules/postcss-loader/src/index.js): Error: PostCSS plugin…
Niklas Forst
  • 1,291
  • 2
  • 6
  • 10
94
votes
16 answers

Tailwindcss: fixed/sticky footer on the bottom

I use tailwindCSS and confront a problem with make footer. base.html {% include "partials/nav.html" %} {% block content %} {% endblock %} {% include "partials/footer.html" %} footer.html
81
votes
7 answers

Storybook-tailwind. How should I add tailwind to storybook

I want to add tailwind to storybook. So that Stories will render just like it will render on web. I used create-react-app project-name --template typescript to create the project. Then to install the tailwind I followed this…
Nivekithan
  • 953
  • 1
  • 6
  • 10
78
votes
6 answers

How to access all the direct children of a div in tailwindcss?

I have this html:
header
sub contents 1
sub contents 2
I want to access the direct children of div with…
Manoj Singh
  • 1,911
  • 1
  • 20
  • 22
72
votes
2 answers

How to make parent div activate styling of child div for hover and active

I made this style for side bar navigation I made a box and used transform to hide it on the left side, to get the curved border effect. On hover, active ect Border button -> bg-green-300 text-green-300 for icon and text font-semibold for text…
Jakub
  • 1,260
  • 1
  • 13
  • 40
70
votes
40 answers

My TailWind CSS Intellisense plugin just isn't working on my VSCode

So the description of the plugin is that it'll display suggestions of classes when am working on the markup, but it doesn't. I've reloaded the plugin countless times. I even restarted vscode and eventually re-installed it. Of course, I did the npm…
Daze
  • 709
  • 1
  • 5
  • 3
67
votes
5 answers

Can't center absolute position (Tailwind.css)

Background & Problem: I'm using Tailwind CSS and Alpine.js for a simple search bar that has a dropdown positioned using absolute Codepen here: https://codepen.io/jdonline/pen/YzXpbyJ When I position the dropdown using relative, it positions…
John Cliven
  • 973
  • 1
  • 8
  • 21
66
votes
9 answers

How to fill the height of the viewport with tailwind css

I'm just trying out Tailwind CSS and want to know how to fill the height of the viewport. Taking this example HTML from the docs
bencarter78
  • 3,555
  • 9
  • 35
  • 53
62
votes
6 answers

How to use CSS variables with Tailwind CSS

Is it possible to use CSS variables with Tailwind CSS? For instance, let's say I have these variables: --primary-color: #fff; --secondary-color: #000; And I would like to use them in Tailwind like so:

Hello…

Armando Guarino
  • 1,120
  • 1
  • 5
  • 16
61
votes
12 answers

Dynamically build classnames in TailwindCss

I am currently building a component library for my next project with TailwindCss, I just ran into a small issue when working on the Button component. I'm passing in a prop like 'primary' or 'secondary' that matches a color I've specified in the…
Wesley Janse
  • 1,244
  • 1
  • 7
  • 14
60
votes
3 answers

How to use :not() in tailwind.css

I recently started to give tailwind.css a try in my Nuxt project. so I needed to use :not(:last-child) pseudo-elements but I don't know how.
60
votes
8 answers

How to solve "semi-colon expected" warnings (css-semicolonexpected)

I'm trying to use Tailwindcss @apply directive in a