What are /r/tailwindcss' favorite Products & Services?

From 3.5 billion Reddit comments

I personally use the css @apply option to avoid this kind of repetition. So you can do something like this:

<div class="something" />

<div class="something" />

In your CSS:

.something { @apply relative z-10 col-start-1 [many more] sm:bg-none; }

Here is more info about this process. https://tailwindcss.com/docs/extracting-components

Haha this is weird, i was looking for this yesterday. You can use the tailwindcss plugin: typography.

npm install the plugin, then add it to your tailwind.config.js

plugins: [require('@tailwindcss/typography')],

and in your wrapper component now you can use the prose class to get styles from the markup

className="rose lg:prose-xl"

https://tailwindcss.com/docs/plugins#typography

You can use the @apply directive in your CSS file to get Tailwind to output standard CSS. Something like

.element { @apply w-32 h-32 rounded-full; }

... outputs to...

.element { width: 8rem; height: 8rem; border-radius: 9999px; }

Not sure if this would fit your requirements but it's useful as a midpoint between not Tailwind/using conventional CSS styles and a HTML file littered with TailwindCSS class selectors.

If the code isn't necessarily for use in the project that you'll have to compile it in, you might just scaffold a Tailwind-only project with Webpack (for example) and paste tailwind classes into a CSS file and then copy the output in the resulting CSS file.

@apply is explained in the docs here: https://tailwindcss.com/docs/extracting-components#extracting-component-classes-with-apply

What does your css file look like. Tailwind doesn't purge non-tailwind styles by default unless you've put them into a purgeable layer, so I'm wondering how you've added the styles.

I also see you're using `whitelist`, which is not the most up-to-date for PurgeCSS or for Tailwind. Are you using Tailwind v2? If so, you'll be using PurgeCSS 3, and so should be using `safelist`. See: https://tailwindcss.com/docs/upgrading-to-v2#update-purge-options-to-match-purge-css-3-0

I think you can do this with variants

https://tailwindcss.com/docs/plugins#adding-variants

I have only gone the inverse way, ie style-700:dark (but not for dark), but I think it should give you all the parts you want to build it the other way around.

Most likely your styles may be getting purged. Are you using string concatenation to load some of the styles?

See here for some do's and don'ts: https://tailwindcss.com/docs/optimizing-for-production

From the docs:

> It’s important to understand that this prefix is added after any variant prefixes. That means that classes with responsive or state prefixes like sm: or hover: will still have the responsive or state prefix first, with your custom prefix appearing after the colon

So in your case, your class should be tw-w-1/2 sm:tw-w-full.

two potential issues I can think of would be:

• Remove the @tailwindcss/ui plugin. It's not needed in v2 anymore, as mentioned over here: https://tailwindui.com/changes-for-v2. This might be the main issue for your problem.

• if the default in primary doesn't work, try changing it to all uppercase, DEFAULT. At least that's how it's always showcased/used in the docs: https://tailwindcss.com/docs/customizing-colors#color-object-syntax

Are you able to customize the min-width options?

https://tailwindcss.com/docs/min-width#customizing

You should be able to make a `min-w-192` (or whatever) to have your 48rem min-width...

> Is it possible to create custom variants that function

Yes, possible. https://tailwindcss.com/docs/hover-focus-and-other-states#creating-custom-variants

Documentation lacks a bit for creating plugins and variants.
So you can check out source code for variants found in Awesome Tailwind list.

I’m not sure I can totally envision your design and visual problem from your description, but if you want your header to change size based on screen size, try the VH unit. So if you want the header to be 25%, use 25vh. https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units

Also, to control images, try object fit https://tailwindcss.com/docs/object-fit

Tailwind is Mobile-first

&#x200B;

Breakpoint prefixes like "sm", "md", etc are intended as minimum width.

sm means (min-width: 640px) { ... }

Try make the video section sticky (with top-(whatever number) and let the annotation flows vertically. You don't need overflow-y-scroll.

Sticky will make the section stays no matter how long the other section is (as long as they are wrapped within the same parent)

https://tailwindcss.com/docs/position#sticky

Have you tried the <code>prefix</code> option?

> The prefix option allows you to add a custom prefix to all of Tailwind’s generated utility classes. This can be really useful when layering Tailwind on top of existing CSS where there might be naming conflicts.

If you've never used a single framework, and you strictly want to use it with HTML, then you can just link to it like any other CSS file:

https://tailwindcss.com/docs/installation#using-tailwind-via-cdn

Then you can just start using it to learn it.

That said, the best way is to use it with PostCSS.

I believe that when you compile your CSS in production (when NODE_ENV is set to production), Tailwind automatically purges all unused styles. Since your configuration doesn't specify which files to check, I'm guessing it nukes whatever it doesn't find.

You should either specify your files in the purge option, or disable purging altogether, although you probably wouldn't want that in production.

I personally don't add custom height classes that often, and stick to either % classes, or the height will be set from padding on the internal elements.

But it's definitely fine to do extend/replace the default classes: https://tailwindcss.com/docs/configuration

Look here: https://tailwindcss.com/docs/controlling-file-size

Pay attention in particular to 2 things: 1) start/end ignore directives in the tailwind.css file like in their example: /* purgecss start ignore */ @tailwind base; @tailwind components; /* purgecss end ignore */ @tailwind utilities;

2) whitelist in the tailwind config file purge section: // tailwind.config.js module.exports = { purge: { content: ['./src/**/*.html'], // These options are passed through directly to PurgeCSS options: { whitelist: ['bg-red-500', 'px-4'], } }, ... }

Also:

If you want to hear a talk about utility classes, Simon has a good one here.

Adam also has a good overview here

Keep in mind tailwind is a "utility-first" framework, not "utility only." like /u/wassegi said, if you have lots of repeated classes all over the place, that's your clue to start extracting components. Make sure you read their docs, there are several helpful pages in this regard: https://tailwindcss.com/docs/extracting-components

Use tailwind to iterate and build the page quickly. Then evaluate where you can reduce repetition. The main goal with tailwind is that you don't have to start by designing all your component and class structures up front, you can build things out and then determine where your real shared visuals are.

Good question, I use https://plausible.io/, it is an alternative to Google Analytics. I haven't used Google Analytics yet but Plausible is very simple to integrate, easy to add custom events and stats are helpful too.

One way: Arbitrary property class="[text-align-last:start] hover:[text-align-last:end]".

Another way: Custom utility. Probably more elegant to define text-last-start than with arbitrary properties, IMO.

Just a heads up, these are the same questions that get asked over and over about Tailwind. So you'll probably get some flack from some people.

These questions are so commonly asked they are all answered on the front page of https://tailwindcss.com/

Scroll down to "Worried about duplication? Don’t be." and "Not into component frameworks?" just after it

https://tailwindcss.com/docs/preflight

>Built on top of modern-normalize, Preflight is a set of base styles for Tailwind projects that are designed to smooth over cross-browser inconsistencies and make it easier for you to work within the constraints of your design system.

You can still get the file with all available classes. Which some might find useful in dev.

Anyway, use this: https://tailwindcss.com/docs/content-configuration#safelisting-classes and set it to a very eager regex, like /.*/.

Now this is going to be a somewhat slow process and will output a very big file. So be sure to disable the eager safe listing in production.

Hope this helps.

If you're looking for a generic placeholder image, regardless of the video image, define one in your config: https://tailwindcss.com/docs/background-image#customizing-your-theme

If you have a ton of videos, each with a unique image, your best bet is probably just to use an inline style to declare the background image. Depending on the context, you might also generate custom classes based on the video IDs (if they're coming from a database) to define and even preload those background images.

With Tailwind 3.0 there’s a new first-party JIT script that can be used for development only. Adding a class to an element will generate and inject the CSS virtually instantly. You don’t even need to save the file - it’s designed for use in the browser.

https://tailwindcss.com/docs/installation/play-cdn

.parent div { @apply mb-2; }

<div class="parent p-16 bg-slate-500"> <div>Islam</div> <div>Christianity</div> <div>Buddhism</div> <div>Judaism</div> <div>Atheism</div> <div>Secular</div> </div>

You can still use CSS selectors, then just use the apply directive to add Tailwind utilities.

Although if I'm understanding what you want to do, you could likely use flex and its gap utilities instead.

I keep getting this error. I'm following the instructions to install the CLI @ https://tailwindcss.com/docs/installation#using-tailwind-cli

I don't see the node modules, the package.json, or the any of the other files that are supposed to be created when running the first install line. Any thoughts?

>tailwindcss normalizes the styling. I think you just remove base

&gt; tailwindcss normalizes the styling. I think you just remove base

What i ment was: If you remove this statement

@tailwind base;

which according to https://tailwindcss.com/docs/preflight do a normalize/reset https://necolas.github.io/normalize.css/ then you probably get to all the default styling back.

But read a bit about it. Using the reset, makes it much easier to start out as all browsers should have same styling.

I don't have any recommendation for video. But, you can find the debugging session on the Next JS official documentation: https://nextjs.org/docs/advanced-features/debugging#debugging-with-vs-code

It's only 3 paragraphs, it shouldn't take you too much time.

They made the things easier now, it wasn't the case before.

Okay I made a little Codesandbox demo but here is an explanation. First always try to group your classes, when you toggle something you want to toggle only the required classes not duplicate everything.

That's a first step.

Second, when working with conditionals you have many options to organize the code, I have tweeted my personal favorite and you can view it here. With these example you can pass an array of strings, with conditionals and it will display them nicely.

Third, you can also use the objects in React ( I will blog about this soon ) where you can apply conditional object keys based on their prop value.

Let me know if you need anything else.

IMHO Tailwind is simply a tool to make it easier to write CSS. In the end it's just CSS like any other CSS. CMS does not matter since all work with CSS.

In Wordpress you typically have a ready to use theme (unless you develop a theme) and you would use CSS rather than TailwindCSS.

Anyway, I use Hugo without a theme (I do my own) and it works fine. Now I use this barebone Hugo/Tailwind3 starter kit.

You can incorporate Tailwind UI into an open-source end product, as long as it isn’t basically a means to redistribute Tailwind UI itself. This is stated explicitly in the license terms.

What you cannot do is share your access to the component repository to non-licensees or create a product that is basically a repackaging of Tailwind IU.

See https://www.notion.so/Tailwind-UI-License-644418bb34ad4fa29aac9b82e956a867 for the details

> it would go into the node folder and see I used that class?

Tailwind will know if you build for production and define the purge options, I believe. By default, it builds very large CSS file with all the classes defined. As for XAMPP, it should just look at your output CSS file that has already been compiled. It should be totally ignorant of where this file comes from (tailiwind/node/postcss) - just know that it exists in its path.

> Could I essentially have the node folder inside the xampp project as well?

Yes. Personally I am not a fan of doing that, as isolating each parts is cleaner, easier to deploy (e.g. if you aren't copying 2 gigs of node_modules when you only want a build artifact), etc., but it should indeed be possible.

Using node just for the build step is one option. Using it via CDN is another (https://tailwindcss.com/docs/installation#using-tailwind-via-cdn). You can Just get the whole raw file and stick that in your project. If you're serving it via localhost, the transfer size is not a real concern.

Not using node / a build step has some downsides (bigger file, no tree-shaking, no @apply methods, no custom themes, etc.), but it can work.

I usually run Node in Docker myself, so everything is isolated. That is also an option.

PS: I am pretty new to Tailwind, so maybe someone will suggest other ways.

Yeah, just because the CSS agnostic about the element it's styling, doesn't mean you can't build in way that's scalable and maintainable. You mention Laravel, this little video helped me: https://laracasts.com/series/three-minute-tips/episodes/1

Do NOT get stuck just copying and pasting things though.

Learn the classes as best you can and understand what they do, so you can replicate what those links above are showing you https://tailwindcss.com/docs

Don't forget the get the Tailwind Intellicense extension for VS Code https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss

Are you loading both Bootstrap and Tailwind in the same project? If so, I think there is some overlap between the CSS classes which will cause oddities. You can fix this by either not loading the Bootstrap CSS or enabling the option in Tailwind to have a prefix on the class names:

https://tailwindcss.com/docs/configuration#prefix

I agree the docs can be confusing. In fact, I learned a lot on this Configuration page that was not really mentioned in other places. Also some stuff is new like the JIT mode which allows some different usage such as "arbitrary value support":

https://tailwindcss.com/docs/just-in-time-mode#arbitrary-value-support

I'm using Tailwind UI and it's decent. Not amazing but definitely has saved me some time and is quite handy to have if the expense is reasonable to you.

Since tailwind purges everything that’s not readable it’s removed for production. If you want to keep it, you need to use the class name as is without string interpolation.

The docs explain this really well: https://tailwindcss.com/docs/optimizing-for-production

The first one is close. You need to declare flex-row on medium and larger sizes.

flex declares display type. Other display types include: block inline grid

flex-col and flex-row are modifiers that change the direction your child elements will flex in. flex-row is the default

Tailwind is mobile first. You need to declare the smallest state first and change how the layout will behave at larger breakpoints.

<div class="flex gap-16 flex-col md:flex-row">

This will make the div switch to flex-row when on screens larger than 768px.

Follow the installation instructions for whatever framework you're using shown in the docs and you shouldn't have any problems. It looks like you're using Next but you changed your scripts to craco scripts even though you don't have it installed.

It's not SSR that's the problem, it's the dynamic class names. The purging process just checks the plain html so it doesn't know that the ${bgName} part isn't the actual class name.

So as web2033 said, the easiest way is to "fix" this is to safelist all the dynamic classes in your TailwindCSS config.

Relevant part of Tailwind docs

According to TailwindCSS docs only the responsive variants are on by default for animations so you'll have to add the group-hover to your TailwindCSS config file manually

Oh no. I do it the "Tailwind" way.

For example, it goes `font-xl sm:font-md md:font-lg` or whatever your use case is. So it has three classes (or more) with each size defined based on media queries.

Edit: see here: https://tailwindcss.com/docs/font-size#responsive

Unfortunately, we don't have such colors in design. And it would be hard to give a name to red like this #ec0412

Here is about JIT: https://tailwindcss.com/docs/just-in-time-modeJit allows to bg-[#1da1f1]

colors: {
...colors,
This is not very good, as tailwind has a lot of colors, much more than by default, and this would make compilation slower.When you need to add a new color use extend (copied from official doc):

// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'regal-blue': '#243c5a',
}
}
}
}

The new jit compiler will allow you to !important stuff now as well.

&#x200B;

See: Just-in-Time Mode - Tailwind CSS

Yes, p-5 is already there, but not of same value as on the previous screenshot. keep changing it following the tailwindcss's spacing util you get the required padding.

We can use event classes like hover and focus in CSS within u/apply but not sure about the group-hover.
https://tailwindcss.com/docs/extracting-components

It's the package they recommend in the Tailwind docs: <https://tailwindcss.com/docs/using-with-preprocessors#build-time-imports>.

I don't know of a better way to do it without the package. If you use it, you'll have the full power of the @apply directive.

Tailwindcss Installation Docs Read the instructions here, and then if you need help, come back, or DM me, I will surely help.

BUT FIRST READ THE DOCS.

If these are reusable styles, have you looked at using `@apply`?

https://tailwindcss.com/docs/extracting-components#extracting-component-classes-with-apply

There are some grid utilities, but you obviously can't do everything that you could by typing your own grid rules.

https://tailwindcss.com/docs/grid-template-columns

In practice it appears (from my limited experience in Tailwind) that the layouts are mostly achieved using combinations of wrapper divs with flex.

>yep CDN because I've found it easier

Working with TailwindCSS is not that hard! You can see this:

https://tailwindcss.com/docs/pseudo-class-variants#group-hover

Hope it help :)

The more I use Tailwind, the more I feel like using only the utility classes are the correct way to go. Almost every time I've created custom classes, I overestimated how often I'd use that class and ended up with a confusing mix of Tailwind classes and my own - not super-useful for long-term maintenance.

The Tailwind docs have some useful information and tips to help you decide if the custom classes approach is right for you.

Asked the same question over at /r/vuejs and it seems that the features are coming in the next Tailwind update..

from /u/lmusliu: "Those are the transition classes from the next update on Tailwind. I think you can get this update on the next branch in Github."

&#x200B;

But thank you for your the link and offer to help. Cheers

You should read the Extracting Components doc. It explains how to create reusable components in CSS (no need for JS components or anything else).

&#x200B;

I try to extract to components when I repeat the same classes over & over like buttons, inputs, labels, menu items, ...