How to extract own classes with Tailwindcss to separate file

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

Fixed template

user_13918507 · Answer

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.

user_15478746 · Answer

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

user_6252398 · Answer

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

How to extract own classes with Tailwindcss to separate file

3 Answers