Recreate the Tweet Creation Modal with Tailwind CSS
Tailwind is a "utility-first CSS framework" that I initially wasn't sure about. The more I have used Tailwind, the more I have liked it. It lets me design my UI quicker than ever before. With Tailwind, I believe you need to know your CSS even better to be able to use the utility classes. I've found some things around the web to rebuild with Tailwind. For this article, we'll build Twitter's tweet creation modal. Let's get started! We'll do all of our work inside of CodePen.
We want our modal to sit in the middle of our screen. For this, we'll need a container that is set to the full height of our browser screen. Then we'll use CSS flexbox to vertically and horizontally center. Let's set a background to match Twitter's dark mode background. With Tailwind, we try to write as little custom CSS as possible. This is one of the times that we will write custom CSS because Tailwind doesn't have this color that we want in its pre-built classes.
Here's the rundown:. Now that we have the foundation, everything we put inside of that main div will be centered in our browser. We have given it rounded borders, a box shadow, and a background of blue. Tailwind provides colors from to with being the darkest. I've also given a custom class modal so that we can add one custom style here.
I need to open a Bootstrap Modal from clicking on a button in a Bootstrap navbar and other places to show data for a component instance, ie. Here is my code:. There is an example for modals at that link. Once you have loaded react-bootstrap, the modal component can be used as a react component:. React-Bootstrap only supports Bootstrap 3. I was recently looking for a nice solution to this without adding React-Bootstrap to my project as Bootstrap 4 is about to be released.
The main idea is to only render the Modal component into the React DOM when it is to be shown in the App components render function. I keep some 'view' state that indicates whether the Modal is currently shown or not.
Instead use ref to access DOM element. Here is working Modal component Bootstrap 4. Decide whether to show or not to show Modal component in parent component. I've used props. You can find more about this here. In this way you have three separate components modal header, modal body and modal footer and they are totally independent from each other.
So it is very easy to use. Just like this:. Thanks to tgrrr for a simple solution, especially when 3rd party library is not wanted such as React-Bootstrap. I met this problem and came up to a new solution:. Reactstrap also has an implementation of Bootstrap Modals in React.
This library targets Bootstrap version 4, whereas react-bootstrap targets version 3.This example demonstrates how to create a basic modal dialog overlay using Tailwind CSS. In order to create an overlay effect by darkening out the webpage content we need to have a wrapper for our Modal with a semi-transparent background. Simply recompile Tailwind to generate the new colour variables.
Next we can define the wrapper. We want this to fill the entire viewport and center align the content, both vertically and horizontally.
All of this is really easy to do in Tailwind and Flexbox. Each class is quite self-explanatory …. Now we are ready to actually create our dialog box to display our message and call-to-actions. By now this should start making sense all on its own ….
The linked example uses Vue.
A complete modal demo with some animations thrown in for good measure is available on my Codepen. I hope this little tutorial was useful and highlights how intuitive Tailwind CSS is for quickly creating layouts and functional components.
Sign in. Creating a modal dialog with Tailwind CSS. Bursts of code to power through your day. Web Development articles, tutorials, and news. See responses 9. More From Medium. More from codeburst. CodeDraken in codeburst. Changhui Xu in codeburst. Ashan Fernando in codeburst. Discover Medium.
Make Medium yours. Become a member. About Help Legal.Blessing Krofegha is a Software Engineer Based in Lagos Nigeria, with a burning desire to contribute to making the web awesome for all, by writing and building … More about Blessing …. Every second Tuesday, we send a newsletter with useful techniques on front-end and UX.
In the dispensation of CSS libraries and frameworks, a ton of awesome libraries have been built to simplify the work of a developer in the quest to create intuitive interfaces. However, quite a lot of them Bootstrap, Foundation impose design decisions that are difficult to undo; they come with predefined components, therefore, eliminating the need for dynamic customization. This is the reason why Tailwind CSS is considered to be a good choice for building 21st-century web interfaces.
With Tailwind CSS, you get to create the components that suit what you want or what you are working on. These components can be created by harnessing the power of the utility-first prowess of Tailwind CSS. In this tutorial, you will learn what Tailwind CSS is and how to work with it. After that, you can go on to build a portfolio website that showcases your skills and other things you have worked on.
There are different ways of organizing styling in modern applications which often have complex interfaces and design patterns. For example, you could style a button with just a few classes instead of always having to declare a single big class separately from your HTML and writing a bunch of properties to make something :.
Other CSS frameworks such as Bootstrap, Foundation, Bulma, and so on present you with diverse predefined components such as modals, buttons, alerts, cards. Another way to put it, you actually own the components, and you get to harness your customization power on any component of your choice.
This means that there is no more need to fight against the framework, and trying to figure out which classes need to be overridden in order to get results you initially aimed for.
Allow me to give you a few reasons why you may want to consider Tailwind CSS. One of the most stressful parts of writing custom CSS is having to name classes. Tailwind CSS solves those problems seamlessly by providing utility-based classes that can be used all the time. However, cases may arise where you need to name some classes. Sometimes this tends to happen when you need to extract certain components and use them later in your design with the help of the apply directives.
This means that you do not have to bust your CSS cache everytime in order to make small changes to your design. Of course not! There are a few use cases where you may not want to use Tailwind CSS. When you need to get started with a mini-project that has a very short deadline especially something a few users would be using or only yourselfthen Tailwind CSS is not the best option.
With Tailwind CSS, you have to creatively create your own. It provides utility classes that are linked to the underlying CSS, therefore, only those with a solid knowledge of CSS can easily build with it.
If you have already done this, skip this process, otherwise, run the command below:. Next, we install a few development dependencies. You can use any of the options that work for you. We need to initialize Tailwind CSS by creating the default configurations. Type the command below in your terminal:. This command creates a tailwind. Hence, Tailwind CSS does not provide any vendor prefixing. Inside your src folder create a folder, name it assetsthis is where all your styles would be stored.
Most CSS frameworks do too much.
In that folder, create a tailwind.That sounds like an excellent component to build, so let's get to it. Per usual, we'll be starting with a regular Laravel project. I've covered this process in a previous postbut for a quick recap here are the steps. With our usual configuration out of the way, we can layer on the custom details we need for this project. Since we'll want to trigger our modal from anywhere in our code, we need to set up a Vue event bus.
But, no need to worry, we'll walk through it step-by-step. So, in the same directory as modal.
To see this all running in the browser, we'll need to run our Laravel Mix. If you're following along, I recommend using npm run watch so your code changes automatically get compiled.
Setting Up Tailwind CSS In A React Project
With our Vue component ready, let's add a custom color that we'll end up needing for our modal background overlay to our Tailwind config. Can you believe that we've already made it through 3 other Tailwind tutorials on this blog before we had to edit the default settings? While the default settings have gotten us this far, we need to add a color to make sure our modal background has an opacity. To add this color, we can hop into our tailwind.Recreate the Twitter Creation Modal with Tailwind CSS
Here we can see all sorts of options, but we just need to focus on the color variable. Inside this object, we can add this: 'transparent-black': 'rgba 0,0,0. Now, we need to make sure we run our Laravel Mix so this new color gets added to our Tailwind code.
After you run that, you'll be able to reference this color like you have any other Tailwind color. How cool is that? With all of our set up out of the way, we're finally ready to start building this modal. Let's get the "hard" stuff out of the way first by opening up our modal. To start, let's think about what we'll want our modal to do.
We'll obviously need to be able to show and dismiss it when needed. The header and body text should probably be customizable as well. Plus, it would be great if we could tell it what type of modal to be, like a succesful modal or an error one.
Instead of opinionated predesigned components, Tailwind provides low-level utility classes that let you build completely custom designs without ever leaving your HTML. Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your first customers. If you're sick of fighting the framework, overriding unwanted styles, and battling specificity wars, Tailwind was made for you.
Every Tailwind utility also comes with responsive variants, making it extremely easy to build responsive interfaces without resorting to custom CSS. While you can do a lot with just utility classes, as a project grows it can be useful to codify common patterns into higher level abstractions. Tailwind provides tools for extracting component classes from repeated utility patterns, making it easy to update multiple instances of a component from one place:.
Tailwind UI is now in early access! Now in early access!
GitHub Twitter Discord. A utility-first CSS framework for rapidly building custom designs. Get Started Why Tailwind? Documentation Components Screencasts Resources Community. Base styles Preflight. Spacing Padding Margin.July 23, 4 min read To make custom configurations, we would have to eject CRA to have full access to tinker with the configurations, which also means a much more tedious setup. I tinkered with it a bit and found a better way to get it done.
In this post, I will be showing an easy way to make Tailwind CSS work inside your React project without having to eject create-react-app. This bootstraps a new React app with all the necessary configurations and build pipelines webpackBabel. This command creates a tailwind. As stated in the PostCSS documentation :.
It can help you add prefixes for animations, transition, transform, grid, flex, flexbox, etc. Inside your src folder create a folder, name it stylesthis is where all your styles would be stored. Inside that folder, create a tailwind. The index. For a complete reference of all the styles applied by Preflight, see this stylesheet.
Tailwind will swap all these directives out at build time and replace them with the CSS generated. Configure your app to build the styles every time you run the npm start or yarn start command. Delete the index.
We gave the form a white background with bg-white and gave it a border-radius to achieve the curved borders with borderpx-8 and py-8 adds a padding of 8px to the x-axis and y-axis respectively while pt-8 adds a padding of 8px to the top of the form. We added font-size of. On the input element, we gave the element some box-shadow with shadow and used.
We added a line-height of 1. Tailwind has awesome documentationso check it out for more information. You can also check out the repository for this tutorial on GitHub to scaffold your app. LogRocket is a frontend application monitoring solution that lets you replay problems as if they happened in your own browser.
Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. Thank you for your grate article.