How to extract own classes with Tailwindcss to separate file - tailwind-css

Question

I have app.css file like
#tailwind base;
#tailwind components;
#import url('features/login/login.css');
#tailwind utilities;
In login.css code like
.login-button {
#apply w-full flex justify-center border border-transparent;
}
body {
background-color: red !important;
}
The rule for body works, but for the login-button does not
How I can create own css class based on tailwind classe in our css files?
Thanks
update: added html file (it Aurelia-framework template)
Original template
<template>
<span class="login-button-wrapper">
<button type="submit" class="login-button">
Sign in
</button>
</span>
</template>
Fixed template
<template>
<require from="./login.css"></require>
<span class="login-button-wrapper">
<button type="submit" class="login-button">
Sign in
</button>
</span>
</template>

Answer 1

If you use PostCSS, you just need to change the import line to this
#import "features/login/login.css";.
Also, make sure that you have the postcss-import plugin connected.
https://tailwindcss.com/docs/using-with-preprocessors/#build-time-imports.

Answer 2

You can write your style under your tailwind assets
#tailwind base;
#tailwind components;
#tailwind utilities;
.login-button {
#apply w-full flex justify-center border border-transparent;
}
body {
background-color: red !important;
}
like this, if prefer using the file you can also use the
directive before that you need to make sure you have installed
npm install postcss-import
#import url("path");
or
#import "path";
You need to check if the path is correct and rebuild your app again this will work

Answer 3

Best guide I found so far
#tailwind base;
#tailwind components;
#tailwind utilities;
// Base
#layer base {
#import "base/variables";
#import "base/elements";
}
...
https://bloggie.io/#kinopyo/organize-your-css-in-the-tailwind-style-with-layer-directive