When I began my exploration of Tailwind with react, I encountered a hurdle. I have a strong dislike for inline CSS due to its subpar code readability. Is there a method available that would allow me to write Tailwind CSS in a separate file and then import it into my JSX file, similar to how we work with traditional CSS?
If anyone has any guidance on how to achieve this, please share your wisdom.
To achieve this, one method is to import the .css file in the .jsx file just like usual. Then at the beginning of the .css file, include the following:
@tailwind base;
@tailwind components;
@tailwind utilities;After that, you can add classes just like regular CSS and use @apply before writing your tailwind code.
.Pass_main{
@apply bg-gray-950 w-screen h-screen flex justify-center
items-center
}
.pass_container{
@apply bg-gray-600 flex justify-around items-center flex-col
rounded-2xl
}This is how your .css file will appear after implementing the changes.
@tailwind base;
@tailwind components;
@tailwind utilities;
.Pass_main{
@apply bg-gray-950 w-screen h-screen flex justify-center
items-center
}
.pass_container{
@apply bg-gray-600 flex justify-around items-center flex-col
rounded-2xl
}Everything is now all set.
If you have a strong dislike for inline CSS, perhaps it's worth considering alternative approaches instead of Tailwind? The core concept of Tailwind revolves around writing CSS inline, ensuring that it remains closely tied to your component.
Of course, you can create wrapper components in separate files:
export const MyDiv = ({ props }) => (
<div class="pt-6 text-center space-y-4" {...props} />
);
import { MyDiv } from "./mydiv";
const MyComponent = () => {
return <MyDiv>Hello world</MyDiv>;
}
However, this may lead to the question of whether or not using Tailwind CSS aligns with your goals and practices.
Currently, I am delving into the realm of Next.js and seeking guidance on how to efficiently debug using Visual Studio Code and Google Chrome. Despite experimenting with various configurations in the launch.json file for debugging a Next.js app in Visual S ...
Hello there, can anyone lend a hand with this problem? This is the code I have been working with: <html> <body> <div style="width=100%"> <div style="float:left; background-color:Red; height:100px">Red</div> <div st ...
I am currently extracting information from an RSS feed using the rss-parser library and then displaying the results in a list. To add the data to the state, I use the following code: async getJobsData() { let feed = await parser.parseURL( "http ...
After successfully running my app on the development server with ng serve, I encountered a failure when trying to build it for production. The error message that popped up was: ERROR in src/app/leaderboard/leaderboard.component.html(9,17): Argument of typ ...
The code below uses Angular 6 and Bootstrap 4, but it seems to have some issues: getNumberOfPossibleSteps() provides an array of integers: [1, 2, 3, 4] getDropDownElements() gives an array of selectable options for each step like this: ["- select an opt ...
While working on my project, I encountered a strange issue where the isLoading state is being set to false before the data fetching process is completed. I am using the useEffect hook to show a loading spinner while fetching data from an API, and then disp ...
* { border: 0px; margin: 0px; padding: 0px; } body { background-color: #FFC; } #wrapper { width:70%; margin: 0% auto; } #header { background-color: #C1D1FD; padding: 3%; } #nav { clear:both; padding: auto; position:inherit; background-color:#F0D5AA; wid ...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapc ...
In my quest to handle the beforeunload event in Firefox, I've encountered a small hurdle. It seems to be working smoothly, but only if the user physically interacts with the page by clicking on it or entering text into an input field. Below is the co ...
Is there a way to detect when the visible price range changes in lightweight-chart, similar to how the timeScale's visible time range change can be detected through subscribeVisibleTimeRangeChange? I couldn't find anything related in the document ...
I have the code snippet below in my app.component.ts file: <mat-toolbar color="primary">My Application</mat-toolbar> <router-outlet></router-outlet> <particles [style]="style" [width]="width" [height]="height" [params]="params"& ...
I'm encountering a somewhat confusing issue. I am attempting to submit a URL to an iframe located on the same page. Upon clicking submit, the iframe replicates the current page, but with the correct URL displayed in the duplicated iframe. It's ma ...
Is it possible to retrieve the link location of a web element in Selenium? While we can easily obtain the text from a web element and use getAttribute("href") method to get the location of a hyperlink, my need is to extract all the links present. For insta ...
A new angular application has been developed as a "bounce" page for an upcoming social iOS app currently in public beta. Users have the ability to share their profiles by simply providing a link to the site. If the page is accessed via an iOS device w ...
Struggling to design a page layout with two navigation sections (top and left) similar to the example below: The light gray area represents where the main content will be displayed on each page. On the left side is the secondary navigation menu that shoul ...
After installing the new classifieds theme on my Wordpress website, I noticed that the menu from the previous theme is still showing up. However, when I hover over the menu, it disappears and only reappears once my cursor is no longer hovering over it. ...
I've encountered issues while trying to incorporate the ESLint Stylistic plugin into my node/react/typescript project when using ESLint. ESLint has updated their code formatting rules and now suggests utilizing the ESLint Stylistic plugin for code fo ...
I am facing difficulties accessing the Github webpage through my home Comcast network. It seems that the issue I am experiencing is similar to the one mentioned in this Stack Overflow post about Could Not Resolve Host github.com. However, since the DNS se ...
Is there a way to save a canvas as an image file and allow users to choose the format (png or jpg) for download without saving the file on the server? Here's what I have tried: JavaScript Code: $.ajax( { type : "POST", url : "../php/downloa ...
I needed to implement validation for this input field <div class="col-lg-6"> <!-- Content Here --> <!-- Requires Validation --> <input type="text" name="name" class="form-control" id="name" ...