Question 367318 in Html Question posted in
Some basic documentation can be found here.

Html – Can i write tailwind css in .css file

I started my Tailwind journey with react, but I faced one problem. I hate inline CSS because of its poor code readability. So, is there any way to write Tailwind CSS in another separate file and import it into my JSX file, similar to normal CSS.

Is there any way to do this please guide me.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I find one way to do this . we have to import .css file in .jsx same as normal then top of the .css file add this

    @tailwind base;
@tailwind components;
@tailwind utilities;

    then you add .class same as normal css and then before you write tailwind just write @apply , then you write your tailwind code there .

    .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 exactly your .css file look like .

    @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 
}

    All set.


  2. 0

    If you hate inline CSS, maybe you should choose a different approach than Tailwind? The whole idea of Tailwind is that you write your CSS inline, so that it is very close to your component.

    Sure you can write wrapper components in a different file:

    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>;
}

    But then I would really question why you are using Tailwind CSS to begin with.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search