How to Split Generated CSS Code Form Tailwind

Build separate CSS files using Tailwindcss and laravel-vite-plugin

I haven't try myself yet, but reading the release notes of Tailwind CSS v3.2 it should be fairly easy to split into two CSS files using @config <filename>:

app.css

@config "./tailwind.config.js";
@tailwind base;
@tailwind components;
@tailwind utilities;

mail.css

@config "./tailwind.mail.config.js";
@tailwind base;
@tailwind components;
@tailwind utilities;

vite.config.js

import { defineConfig } from "vite"
import laravel from "laravel-vite-plugin"

export default defineConfig({
    plugins: [
        laravel({
            input: ["resources/css/app.css", "resources/js/app.js", "resources/css/mail.css"]
            refresh: true,
        })
    ]
})

Is Tailwind CSS change its sizing rules recently?

Pardon me, this was a very silly problem. I was trying with a 200% zoom screen. Very funny!

How to export Tailwind CSS result to a CSS file?

You can see all the CSS used in a webpage by using a browser extension and then copy all of them.

I had used this - https://chrome.google.com/webstore/detail/css-used/cdopjfddjlonogibjahpnmjpoangjfff?hl=en

Creating a horizontal rule (HR) divider that contains text with Tailwind CSS

You can use this HTML syntax to create what you want :

<div class="relative flex py-5 items-center">
    <div class="flex-grow border-t border-gray-400"></div>
    <span class="flex-shrink mx-4 text-gray-400">Content</span>
    <div class="flex-grow border-t border-gray-400"></div>
</div>

See here the result: https://play.tailwindcss.com/65JULZ5XES

How to partition input field to appear as separate input fields on screen?

You dont have to keep 4 separate fields;

First you should adjust the character spacing, and than adjust border style of bottom...

#partitioned {
  padding-left: 15px;
  letter-spacing: 42px;
  border: 0;
  background-image: linear-gradient(to left, black 70%, rgba(255, 255, 255, 0) 0%);
  background-position: bottom;
  background-size: 50px 1px;
  background-repeat: repeat-x;
  background-position-x: 35px;
  width: 220px;
  outline : none;
}

<input id="partitioned" type="text" maxlength="4" />

Tailwind CSS - how to make a grid with two columns where the 1st column has 20% of the width and 2nd one 80% width?

Set grid-cols-5 to the wrapper and col-span-4 to second column. It will cover 4/5 (80%)

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.1.2/tailwind.min.css" />

<div class="grid grid-cols-5 gap-3">
  <div class="bg-blue-100">1st col</div>
  <div class="bg-red-100 col-span-4">2nd col</div>
</div>

Tailwind code hover:border from its docs doesnt work for me

It seems you are using tailwind version below v3. As per documentation hover doesn't support border width but supports border color. Check this out https://v2.tailwindcss.com/docs/hover-focus-and-other-states#hover
But it supports border width in v3. Try changing version in tailwind playground with your code and see if it works

---

Related Topics