What is Reddit's opinion of
Tailwind CSS?
From 3.5 billion Reddit comments
100 reviews of this app found across Reddit:
Tailwind is so weird. Both the proponents and opponents argue from principles and purist ideologies like whether it's okay or not okay to move your styling into your html. But, that isn't why people use Tailwind.
People use Tailwind because there's TailwindCSS and also TailwindUI, and on the whole it's a gigantic body of work with consistent styling that allows a developer to build a really nice-looking application with very little effort.
Your alternatives these days are pretty much Bootstrap or one of a smattering of other poorly-supported smaller CSS libraries, and Bootstrap is many things but lightweight it ain't.
I'm enough of a purist that I refuse to build anything large with Tailwind, but man, I really really want to. It's so pretty.
Honestly, it seems to me like
1. you were expecting tailwind to be just like bootstrap. that is not the case and never will be.
2. the point of tailwind is to give you the freedom to style your own components with predefined values so your ui doesn't become a mess.
3. You're not used to components, if you're having to repeat yourself too many times.
4. https://tailwindcss.com/docs/pseudo-class-variants was literally the first result when I looked up hover.
5. Tailwind bundle size is much smaller than bootstrap's, even without PurgeCSS.
6. You're complaining abouy something that someone has done for free. If you're not satisfied, there's nothing stopping you from making a bootstrap version of jetstream (it might even exist already, knowing the laravel community).
I dont know, man, maybe you just don't like changes and learning new things... which is fine too, but you can't complain of people who do enjoy those when they bring improvements.
Yeah, this is not the sort of criticism that pushes anything forwards. Lazy, ad hominem, and largely invalidated by the basic mechanics of component composition/encapsulation, which is literally the use case tailwind css is designed for. An intelligent critique of tailwind css, or at least one that exhibits more than a surface level understanding of it, would be an interesting read; but that piece is a fart joke disguised as a serious tech argument.
Just a heads up, it seems like you’re using string concatenation to create the bg and text color class names. This will trip up purgeCSS when building for production.
https://tailwindcss.com/docs/optimizing-for-production#writing-purgeable-html
Yeah, with Tailwind you'd typically extract reusable styles into components. From the docs:
<!-- Using utilities: --> <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"> Button </button>
<!-- Extracting component classes: --> <button class="btn btn-blue"> Button </button>
<style> .btn { @apply font-bold py-2 px-4 rounded; } .btn-blue { @apply bg-blue-500 text-white; } .btn-blue:hover { @apply bg-blue-700; } </style>
If the creators of tailwindcss truly believed in this "utility first" approach, why would they make a paid product called tailwind-ui which is the antithesis of the fundamental idea of tailwind?
From tailwindcss.com/components:
> Unlike many other CSS frameworks, Tailwind doesn't include any component classes like form-input, btn, card, or navbar.
> Tailwind is a CSS framework for implementing custom designs, and even a component as simple as a button can look completely different from one site to another, so providing opinionated component styles that you'd end up wanting to override anyways would only make the development experience more frustrating.
> Instead, you're encouraged to work utility-first and extract your own components when you start to notice common patterns in your UI.
And then later from tailwindui.com:
> Beautiful UI components, crafted by the creators of Tailwind CSS.
... which costs $249? Am I the only one to notice a discrepancy here?
Literally an entire section on using tailwind for responsive design. It's basically THE best feature tailwind has
https://tailwindcss.com/docs/responsive-design
You're not putting CSS in your HTML. These are classes. They're not just CSS properties; they're abstractions of concepts. Going through some of the more complex utility classes they're actually doing a lot of convenient things. They're not even close to being inline styles and I don't know why people keep saying this. Knowing how an element will look simply by scanning these classes without having to look for the CSS style file or the style tag is hugely convenient
The official tailwind docs also have instructions for doing this with Vite. Pretty much identical apart from the first command https://tailwindcss.com/docs/guides/vue-3-vite
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
Check their Extracting Components section.
They encourage you to make components from utility classes and that's probably the best way to use the utility patterns.
I really like this! Super clean and I love the animations and detail that went into it. I second the routing comment that u/sjaigeo mentioned. React Router is a super popular routing solution for React, and it definitely will pay dividends to know how it works.
Another piece of advice I might give is to explore more state management solutions in React, because there are indeed many. Having a top level state object where you pass down props to your components is completely valid, and will definitely work for a smaller application, such as this. However, as the application expands, you might find that you run into an issue with prop drilling (passing down props through multiple levels of components). I'd try a few different state management solutions and see which one you like most. Definitely try using React's own Context API with useReducer and useState hooks to start. Once you feel comfortable with that, you can check out other solutions like Redux (not as dead as people might have you believe), MobX, or Recoil.
Also, Material UI is an absolute bear of a component library to work with. It's trying to do everything at once. If you're looking for a component library, I'd recommend something like reach UI (reach.tech), which is something a bit less heavy that you can customize yourself. Alternatively, you can play around with a more CSS oriented solution like Tailwind CSS (https://tailwindcss.com/), which is getting a lot of buzz right now.
Great job though! Always great to see mobile devs coming over to our neck of the woods to try out some web dev work.
Tailwindcss is a utility-first css framework. Component based approaches tend to produce Uis that all look very similar (e.g. your typical bootstrap site). Utility-first approach gives a lot more power to designers. Their website does a good job explaining the advantages of this approach.
It is compiled through postCSS (it is a plugin to postCSS) and what is not used is stripped out on production so any styles not used will be removed, and it should be done this way as tailwind is HUGE.
https://tailwindcss.com/docs/using-with-preprocessors
I never used tailwind until a recent personal project, I am in love with it. It has become very natural to me.
In a world of components tailwind makes the most sense to me simply needing to add classes inside of my components and anything over three(I believe this is what is recommended) a @apply is used as shown above.
It is also highly customizable through the config file
For more on the Refactoring UI topic itself, I'd recommend the book — it delves deeper into many of the tidbits that the author went through in his videos.
For practical examples, I'd suggest to peruse the Tailwind CSS (and its productized version, Tailwind UI) site, since the author co-created this product and poured a lot of the UI design knowledge into it. There are also plenty of sites like Screenlane that collects UI designs in the wild across different industries and platforms; once you get past a certain point, it's more about putting the knowledge into use to develop your skills.
Everything else, I think you will likely get more diverse responses from /r/UI_Design than this subreddit.
If you want something truly custom you'll have to roll your own. Perhaps merely creating your own components with something such as tailwind.css can help you with this.
Similarly, there's nothing stopping you from using something like Vuetify and changing how it looks yourself. For example even just changing the base font will immediately change the material look.
Tailwind is very much in the same vein as these CSS frameworks. The biggest differences are:
Tailwind was designed from the ground up to be highly customizable. Unlike other frameworks where your locked into the utilities they provide, Tailwind has a ton of customization options allowing you to tailor the framework specifically for your project.
Tailwind takes a pragmatic approach to class naming. We've prioritized understandable and descriptive classes over having really short classes, or even names that align perfectly with their respective CSS properties.
Tailwind is component friendly. We sit somewhere between BEM and going full-on utility classes. Where it makes sense we encourage creating components, and have even created tooling to make this easy to do.
Finally, we've given our documentation as much care and attention as the framework itself. We believe that having beautiful, easy to understand, easy to navigate documentation will make developer's lives better as they work with our project.
being able to use @apply for my small components is one of the main reasons i love react + tailwind lmao
just say you didnt give tailwind a chance, which is fine - https://tailwindcss.com/docs/extracting-components
Damn, 15 years, and you still haven't learned how to Google or even peruse official documentation? (e.g., customizing colors)
Crazy how nature do dat
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"
In fairness, the Tailwind methodology is to write components and use tw classes within those components directly.
Writing your own classes and applying tw classes is an escape hatch.
It doesn’t have to be ugly. You can create pretty, descriptive classes, and then do this in your CSS:
.beautiful-name { @apply text-white bg-black rounded-lg shadow-md hover:bg-blue-700; }
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
Flex / Grid is part of CSS and isn't going anywhere, learn it.
The trend for many at this point is to not use frameworks like bootstrap for production sites but many still do and will carry on doing so as it works.
There are plenty of "utility" frameworks that can add value to a build like https://tailwindcss.com/ if you prefer that method.
For me at this point a decent css normalisation base like reset.css with SASS i haven't used a framework for some time.
For those interested, a lot of this is very accessible in Steve and Adam’s tailwind css framework. Highly recommend checking it out! If you want to see it in practice, check out Adam’s YouTube channel (Adam Wathan).
Tachyons, it has the best concept of modularity & today TailWindCSS caught my attention.
I use Tachyons but that makes me not write any CSS & bloats my HTML a lot bcz of too many classnames & kinda makes me lose my cool. Bootstrap when I started as beginners only know that bcz of its popularity. Then Foundation but it was hard & I struggled there a lot.
I think if u want ur site to be different then u need to write a lot custom CSS. Also it makes u understand CSS. Trust me, CSS is the most difficult language to master even though it takes u only a day to learn. This is just my opinion. Throw any framework at me & I will be proficient with it in 6 months, but been doing CSS since 3 years & still suck at it. So my advice write as much as CSS without framework bcz u will learn a lot & can then build ur own Framework.
Logic of separation is a pain with HTML/CSS, it's never truly separated and that is ok in my opinion.
You can set up your own theme if you want to have those colors, Tailwind doesn't prevent you from doing so. They even say that they encourage you to do so in their documentation:
https://tailwindcss.com/docs/customizing-colors#color-palette-reference
You can have valid criticism, but these aren't remotely close to that...
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.
With tailwind you don't have any base components. Therefore you have nothing to fight with, no need to override anything. You can see directly in your HTML what is going on. I'm not doing it justice, check out their docs. It's built by one of the Refactoring UI guys.
Another suggestion is to try out https://tailwindcss.com/.
It really helps with designing components, since, instead of trying to think up a proper class name to use, utility classes are combined to achieve the desired result.
You may find that Tailwind CSS is up your alley. Even as someone who is very knowledgeable when it comes to CSS, I find Tailwind really useful for developing the front-end for web apps.
I don't know how much clearer i can make it? If you look at the tailwind website, the animation on the landing page, watch it through to the end:
It looks nice and simple right? You've got classes that are semantically named after CSS properties and you just write the values into the class name.
WRONG! This is a terrible way to do things.
The number of classes there isn't realistic, multiply the total number there by 3 for each element, and you'll start to have something more real world. The DOM gets super polluted.
True gzip/brotli can take care of repetition in the context of performance budget but that's a bandaid.
You'll get to the point in any major project using tailwind where you'll say: "wait a minute... why teh fuck do i have to learn this custom class syntax when i can just use an inline style attribute?".
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.
You should tell Tailwind to look for all possible class names in your template files (purge) also make sure that the class names are written in full in these files (dynamic values) and generally any html snippets have purgeable markup.
Wouldn't expect it to flat out not work but I'm pretty sure Tailwind advises against doing this sort of thing as it uses the full class names to identify which classes are being used which it is unable to do when the names are split up like this.
https://tailwindcss.com/docs/optimizing-for-production
That specifically mentions that it needs to identify the classes to purge them but I don't know if you're maybe using jit compiling and the same holds true.
Yes definitely takes time reflecting on the structure of components, reusability etc. I feel though that by time this process speeds up, and the code becomes much more organized, maintainable and more customizeble than just when using either raw css or bootstrap
For point 1, twin macro could help you. It's a mix of css-in-js and tailwind. I know what some might be thinking... arf, yet another way of styling. But it's much more performant than tailwind but can also help you with reusability and maintainability. It's better than just vanilla css or atomic css in the way that it makes dynamic styling so much easier, makes creating design systems and themes easier, it has locally scoped styles doesn't have cascading effect and much more.
maybe you've already taken a look at this but it help with you with the classname soup
two potential issues I can think of would be:
Remove the
@tailwindcss/uiplugin. 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
defaultin 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
Sure. Normally the giant CSS file is generated via the PostCSS macros that Tailwind implements: https://tailwindcss.com/docs/installation#include-tailwind-in-your-css
/* ./your-css-folder/styles.css */ @tailwind base; @tailwind components; @tailwind utilities;
Now that we're inlining the styles in the components on demand, all we need are the preflight styles so we can change the above to:
/* ./your-css-folder/styles.css */ @tailwind base; And end up with a much smaller file.
I don't use frameworks, but here are some I've heard about from other devs:
- Tailwind CSS is a framework that is supposed to make CSS styling easy. Don't see much point, but I write CSS directly anyway; might be good for those who are not experienced with this.
- Vue.js is a powerful JS framework that takes care of a lot of stuff like showing variable values on the page, makes the game work faster and reduces the amount of copy-pasted code you have, among other things. I would probably have used it if I knew it existed when I started Matter Dimensions. You probably need to develop with it from the very beginning to get the full effect of it.
- Incremental Game Template is one step further - this is Vue plus a lot of components you might need to use for your incremental game (like already implemented saving, for example). It is in active development right now, but it might veer more in the direction of RPGs in the future.
You may want to read the article again. A tl;dr of the section you are talking about would be
> Some say writing CSS class names like "text-center" violates separation of concerns. I used to be like that too, so I wrote semantics class names like "author-bio". Turns out my concerns were still not separated.
And for anyone else reading, Tailwind has a whole page explaining why using utility classes is a good idea.
If you want them all to be the same, no. If you want different things to show (sizes of fonts, or different widths, or whatever), then yes. Relevant docs: https://tailwindcss.com/docs/responsive-design#overview
You make your own.
Some Example buttons are in the Tailwind docs. Then, you either build a blade template that you include, or use Components, an approach that I personally prefer.
php artisan make:component Button
This will create a new blade view resources/views/components/button.blade.php that you can use in all your other views with <x-button></x-button>. You do your styling of the button in this file, e.g. just copy the Tailwind CSS code linked above.
The command will also create a app/View/Components/Button.php file that can contain variables
<?php namespace App\View\Components; use Illuminate\View\Component;
class Button extends Component { public $text;
public function __construct($text) { $this->text = $text; }
public function render() { return view('components.button'); } }
In your button.blade.php you can then access the $text attribute just with {{ $text }} and pass it a custom text with <x-button text="Submit"></x-button>
With any framework or tool you use knowing how to use the documentation and find what you're looking for is far, far more valuable and important than being able to recite things off the top of your head.
Also, especially since you're taking a course with BS3, try to actively not memorize the classes, it'll get in the way and cause you headaches down the line if you do.
If you do want to start learning/memorizing something, I'd strongly recommend learning Tailwind. It's 'utility CSS", so you learn a syntax/paradigm and then you can do just about anything you want instead of being locked into a certain framework's way of doing things. Check it out here: https://tailwindcss.com/
There are many ways with ups and downs. Currently I like using atomic utility classes for styling. One great library is: https://tailwindcss.com/
I suggest also checking that out.
What do you mean you can't apply more than one CSS class to a React component or use a dash in its name? Here's a perfect valid example that uses Tailwind:
const MyComponent = (props) => { return ( <div className="w-full flex flex-col justify-start items-center"> Hello World </div> ); };
Sounds good :) I always get stuck on design too, lol.
Maybe a bit offtopic from this sub, but why do you refuse to use out of the box frameworks?
Also, in regards to css framework, have a look at https://tailwindcss.com/ - provides many utilities for grids, colors etc. I think this would be perfect for a game.
This is awesome! Nice job! When I was using Foundation the lack of themes was always frustrating. With that being said, I'm using TailwindCSS (https://tailwindcss.com/) now and it is so much faster and easier than Foundation and Bootstrap. No one is making themes for it yet so you may want to take a look and you could be an early mover.
For React Counter: https://reactjs.org/docs/hooks-state.html, the first example is a counter. Notice that we can setCount by incrementing, `setCount(count + 1)` or by decrementing: `setCount(count - 1)`, or by anything that is needed.
For TailwindCSS: here is the installation guide: https://tailwindcss.com/docs/installation. If you want a quick and easy way to install (don't use in real-life production applications), you can do https://tailwindcss.com/docs/installation#using-tailwind-via-cdn. As for learning Tailwind, I mostly took what I know from CSS and just searched Tailwind and applied the appropriate classNames that I needed to my components. If you don't know CSS, I suggest learning that first prior to learning Tailwind, as it will make the process a lot easier to understand.
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...
That's a pattern that's much like Tailwind/WindiCSS, so it's an okay method of approaching it if it's maintainable for your cases. I'm personally a fan of either using those (they're basically the same) or establishing a consistent base text size (ex: 16px) and always scaling off of 1/8ths of a REM (root font size), ex: padding-left: .75rem, padding-right: 1.125rem, etc. Flexible but easy to stick to.
The more component-focused method would be to simply make reusable components with styles scoped to their particular use cases - like instead of having padding-12 and padding-8, you might have a .table-row style that includes the appropriate padding and supporting styles, and a .other-thing style that includes the smaller padding and supporting styles for your other ui element. It's definitely more reusable in the sense of if you suddenly want to combine two different UI concepts together, you can simply extend / combine those existing styles as needed (may be easy or hard depending on your tooling). This is how we're currently working with a very thicc component library for a relatively large data-heavy site at a place that I'm volunteering at, and it's extremely easy to work with and extend, granted it's using SCSS for some of the related tooling, lots of mixins / extends.
There's arguments that could definitely be made as to what's a better or worse way of doing it, but at the end of the day what works for your project / team / etc and is easily maintainable (can easily add / remove rules with minimal work) will be the best choice in your own situation. If you can take this pattern and feel comfortable giving it to 10 other people to continue the work, it's probably solid. If you look at it and immediately see how someone will mess it up in the first 5 seconds of working with it, it's probably a good idea to approach it slightly differently.
> 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.
Sure! It sounds more complex than it is. Composition just means that you can use smaller pieces to build a more complex whole. In this instance it means you can use a lot of smaller classes to achieve a desired outcome.
The tailwind homepage has a great example of this with their demo. https://tailwindcss.com/
Tailwind is entering that same territory as PHP where everyone who bashes on it knows almost nothing about it.
Tailwind obviously isn't for everyone but holy shit just read the docs https://tailwindcss.com/docs/utility-first
So given I understand what you want to achieve from the layout you already have, what you essentially want is for the div that contains the content and the sidebar to be in a flex column for small sizes and a flex row for md and up.
Now in the big screens you have 5/6 for the content and 1/6 for the sidebar. But when they are stacked (on smaller screens) you want the content to occupy as much height as available, so you need for the content to grow as much as it can.
Now, when content becomes too much you may consider adding an overdlow-auto to its div.
<div class="flex flex-col h-screen m-auto max-w-screen-xl">
<header class="h-10 bg-red-500">Header</header>
<nav class="h-10 bg-gray-200">Nav</nav>
<div class="flex flex-col md:flex-row h-screen">
<main class="bg-green-500 flex-grow md:w-5/6">
Content
</main>
<div class="bg-blue-200 w-fixed ">
Sidebar
</div>
</div>
<footer class="h-20 bg-gray-400 ">Footer</footer>
</div>
Those aren't part of the tailwindcss library those are entirely separate by the same team who made tailwind.
I thought you were asking about extracting tailwind components in the core tailwindcss library.
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
It's easier to visualize when you can see exactly what properties are set on which elements, in context. The Tailwind classes each set like 1-2 properties.
Check out their grid classes, this one and the ones below in the sidebar: https://tailwindcss.com/docs/grid-template-columns
Not sure if my answer is beneficial as I do not dislike working in CSS - but we have a love/hate relationship.
One library I’ve found to be indispensable is Tailwind CSS.
While it doesn’t remove the need to do styling - it makes that task much more straight forward.
It is fully customizable and extensible.
Plus it’s tiny - it removes all unused css - per their claim: “most Tailwind projects ship less than 10kB of CSS to the client”
You can also mix and match, bringing its capabilities into your existing css or sass/scss with @apply.
Finally, you can use it in plain HTML to Angular/React/Vue/etc.
Nope, you don't need to use PostCSS directly. You can see more details on the documentation page. It is recommended to use PostCSS directly if you have an involved CSS pipeline. For this generator I wanted to target the simpler case.
I happen to disagree. Imagine if tailwind (https://tailwindcss.com/) didn't use any shorthands. If you have never used it - the examples probably looks like horsesh*t, but once you get used to it, it makes a ton of sense. Tooling can help you convert back and forth between shorthands and full props, but it is crucial to be able to write very short and expressive styles if you want to be able to use them inline.
Very quickly the shorthands will feel second-nature to you.
<div[w:100px w@md:140px x:50%]>
will be much easier to write and read than a react equivalent
// your jsx file <div className="app-menu"></div>
// some related css file .app-menu { width: 100px; transform: translateX(50%) } @media(min-width:800px){ .app-menu { width: 140px; } }
Tailwind is Mobile-first
​
Breakpoint prefixes like "sm", "md", etc are intended as minimum width.
sm means (min-width: 640px) { ... }
First of all, great jobs! One tiny detail, colours... Where did you get them from? If you picked that by hand, then the excellent job! There are some sections where the contrast between text and background is too low so the text is unreadable, you might focus on that. I usually use some colour palettes so I don't have to worry about it. For example, Tailwind docs have a wide selection for different colours: https://tailwindcss.com/docs/customizing-colors
​
With these palettes, you really quickly learn what does and doesn't look good and you will be preparing professional websites in no time. Here is one UX tip for you as an example:
​
Depending on how high priority your button has, you can choose different styles:
- Primary button - dark background, write text
- Secondary button - light background, dark text
- Tertiary button - transparent background, dark text, dark border
- "Try to hide from user" button - transparent background, no border, dark text
​
Example: https://imgur.com/L40TM8Q
By "dark" and "light" I mean dark version of a specific color or light version of specific color. You can also mix&match different colors (green for success, red for error) or use gray. Don't try to use colours everywhere, that makes the UX chaotic.
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)
No that's pretty much it. Unless you spend a big effort in customizing it your page will look identical to all the other bootstrap pages out there. You could have a look at Tailwind
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 find styling intimidating I highly recommend checking out tailwind css. I hated styling and was pretty meah at it but once I found tailwind it became one of my favorite parts of the process.
The other obvious, popular library that satisfied Locality of Behavior is TailwindsCSS:
Not #nobuild, although you can set it up to feel like that.
Using htmx, alpine and tailwinds on a project allows you to do nearly all your work directly in HTML, LoB bliss...
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.
It just takes some time. Styling requires a lot of patience and iteration. I learned by aggressive research. If I ran into a problem, I would look it up and re-design until it worked. Same idea if I didn't know how to do something. CSS Frameworks definitely help (I've personally found success in tailwind).
I'm guessing that your header is set to position: absolute, fixed, or sticky. Correct?
The <code>.h-full</code> class sets the height of an element to 100% of its parent. So if you have, say, a sub-header that takes up 10% of a container, you should expect a sibling .h-full element to overflow their container by 10%.
One way to achieve what you are trying to do is with flexbox: https://codepen.io/pigparlor/pen/KKNbMbV
I'm a huge fan of Tailwind.css, which is a utility style css library, so instead of button-primary or something like that, you use utility classes to define the background, border, border radius, etc. So a button's classes could look like bg-blue-500 text-white px-3 py-2 hover:bg-blue-600
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
> If you’re just using bootstrap for the layout utilities it’s probably not the best fit. Look for a CSS framework that provides what you need without inheriting a bunch of things you don’t.
The best I've used for this purpose has been TailwindCSS.
Since noone seems to have mentioned it, one awesome tools these days is TailwindCSS. It basically skips the "naming classes in css" part, so you write things like "bg-black" directly into the class attribute of the div. The more component based your work, the better it is. And it has some neat presets for colors for instance. https://tailwindcss.com/
+1 for storybook. It's like visual TDD for UIs. I wish it were a little less bloated, but I can't live without it.
As an alternative to #6 (use a react component library), I'd recommend trying a CSS utility library. I've been using tailwind in a project and it's really cut down the time I spend thinking of class names and writing custom CSS.
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'],
}
},
...
}
All Tailwind users should familiarize themselves with @apply and read this docs page carefully. This would mitigate a lot of pain points people have when using TW. But I‘d be interested if those techniques are enough for major enterprises with their own design systems to use TW.
And while I like the workflow of writing TW styling and the fact that I can move or delete markup without worrying about styling, I don’t love how bloated it makes the markup. Adding Livewire and AlpineJS to the mix makes it even worse. Now my views are one huge pile of HTML that encompasses both logic and styling, which is terrible for readability. I feel like React offers a better developer experience with markup, styling (CSS-in-JS) and logic as part of one component, but mostly separated within that component.
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.
To be clear, Tailwind UI is not Tailwind CSS. Tailwind UI is an opinionated, premium product offering that's much more like Bootstrap.
Tailwind CSS can be found here.
In general though no, you don't want to use two CSS frameworks at once. If you want to use Tailwind, the usual way is to create say a .btn class, and then use their classes to do something like this in your CSS file:
.btn { @apply rounded py-2 px-3 bg-blue-600 text-white; }
That way you just use the .btn class, and only have to modify your CSS in one place for those components.
Fellow .NET developer who dabbles in front end work. I highly recommend checking out tailwindcss for styling components. I used to hate it but once I found tailwind it’s my favorite part of front end work!
Here’s a good explanation of why a utility based framework is beneficial
And here’s a recent example of the creator of tailwind building a page.
I've recorded some problems I've encountered with tailwinds in particular
- Unclear how to perform bundle splitting (is this even possible?)
- Requires additional PurgeCSS build step to strip unused css (of which there is an immense ammount)
- Potential for inconsistencies between dev vs prod due to purging CSS in prod and not during dev
- PurgeCSS step is quite slow for large apps (scans for strings in your prod bundle to identify what selectors in the bundle can be kept)
- Since the stripped css file is shared throughout the app, adding or removing a usage will invalidate the css file cache for the whole app
- Uses a DSL that's almost but not exactly inlining CSS
Need to consult a dictionary to look up what tailwind key maps to what css property
Inconsistent class naming rules. Possibilities I've encountered:
-
[property-name]-[property-value](e.g.pointer-events-noneforpointer-events: none) - just
[property-value]( e.g.flexfordisplay: flex,absoluteforposition: absolute) - a variation of the
[property-name](e.g.borderforborder-width: 1px;) [first-piece-of-property-name]-[property value](e.g.justify-centerforjustify-content: center,flex-colforflex-direction: column)[second-piece-of-property-name]-[property value](items-centerforalign-items: center)
-
- Somewhat arbitrary increments of units (0.25rems from 0.5 to 1.5rem, 0.5rems from 1.5 to 3, 1rem from 3 to 6, 2rems from 2 to 16)
- Mental math required to transform designs to tailwinds units.
Implementing designs consists of- get px value from design
- convert to rems (divide by 16)
- round to closest tailwind unit
it is. https://tailwindcss.com/docs/functions-and-directives/
what you're talking about is the shorthand (your comma is wrong here)
even then, you'd write for example font-bold. i can just write out font-weight: bold or use css / sass variables to define what "bold" means.
That's an interesting one. I wonder if there's a way to avoid JS for this...
I haven't tried it myself but it is possible to reference the tailwind stylesheet via CDN.
However, as the official docs explain, you do lose some of the benefits...
https://tailwindcss.com/docs/installation#using-tailwind-via-cdn
I suggest checking out tailwindcss. I’m using this framework for every project and I totally love it. Bootstrap is great for creating quick website for testing out backend, but it’s hassle to costumize it.
// ... extend: { colors: { x: '...' } }
is totally fine and will translate to the corresponding background-, border- and text-colors.
But still, you have to rebuild, ofc.
​
edit: source
This isn't a direct answer to your question, but it addresses the "CSS files turns into a mess". You should checkout https://tailwindcss.com/ it is a little weird at first, but style management is ten times easier.
I've been using Chakra UI a lot recently and really enjoy it. It's heavily inspired by Tailwind CSS, so it's built to let you easily theme and create custom components while still having a decent amount of premade ones.
Creating your own user card component could be something like (roughly, untested):
const UserCard = ({ name }) => ( <Box padding="6" backgroundColor="white" shadow="md"> <Flex align="center" justifyContent="space-between"> <Avatar name={name} src="https://bit.ly/dan-abramov" /> <Text fontSize="4xl">{name}</Text> </Flex> </Box> )
I'm really confused by this article. The author seems to be saying that he likes the idea of atomic CSS but Tailwind is just too big, so he wants to reinvent the wheel. But he ignores some key quotes from the TW site: "the generated file size will vary wildly from project to project" and "With PurgeCSS, you'll have a hard time generating CSS that isn't under 10kb minified and gzipped". He also incorrectly says that TW "recently shipped its version 1 release" when they've only just launched their first 1.0 beta.
Hi there Flopsey,
Sounds like your venturing out on a cool new project :-).
Regarding the css/scss part of your question, I recently was looking for a new css framework that allowed do heavy customizing while not reinventing the wheel. I tried Tailwind (https://tailwindcss.com/) and I can highly recommend it.
It's what they call a "utility first" approach. It gives you the tools to create your own styles and components without having to write all the css. Tailwind does not impose a certain style but gives you the building blocks to build your own. It's quite refreshing compared to Bootstrap.
Can't advise on the js stuff as I'm not too well educated in that regard.
Let us know how you fare out! Happy to answer any further questions :-).
I PM'd the designer and this is what he said:
> Unfortunately, Sketch does not spit out the code - you would have to take the design and code it with HTML/CSS. Frameworks like Tailwind CSS make this much easier.
>The reason I design in Sketch first is because I'm much more efficient at making at a design in Sketch vs code. Easier to explore ideas/make mistakes without spending a lot of time on it than code the final version. I know some people who design in code and are good at it. I've tried it but it usually slows me down.
Not OP but from what I've seen, it's better to handle that with the configuration of the system vs the use of that system, regardless of whether or not you're using utility-first.
The article also argues for something like atomic-design such that you can alter a component's styling independent of those global configurations and have it reflect on multiple pages.
In that case I would recommend Tailwind. For one, its configuration is among the most flexible that I've seen, since it's dynamically generated from a js file vs others where you might be able to tweak certain set variables. And there are ways to actually extract the utility-first styles into its own independent css file if you're trying to split things out into components.
Documentation : The usually printed instructions, comments, and information for using a particular piece or system of computer software or hardware.
Examples:
const valid = 'prose-h1:text-red-600 prose-h1:m-14' === prose_h1CSS;
that's explicit enough for tailwind.
You can add prose-h1:* to your safelist I think. Checkout out https://tailwindcss.com/docs/content-configuration#safelisting-classes
Tailwind scan files and extract classes to land in CSS file. It can't extract dynamically joined strings. There you can read docs chapter related to how does Tailwind create final CSS file https://tailwindcss.com/docs/content-configuration
Also, the Play CDN supports @apply and config customizations, so you may be able to reference that instead of whatever the default CDN CSS file codepen uses: https://tailwindcss.com/docs/installation/play-cdn
I don't think anyone has mentioned yet, use TailwindCSS and take advantage of @apply when it makes sense to structure similar collections of css utility classes like .btn.
You can customize tailwind to pretty much anything. What are you specifically looking to do?
https://tailwindcss.com/docs/adding-custom-styles
You can change, add, extend colours, class names, values, etc
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.