When building my angular 12 solution for production, styles are not applied. Following online docs I have taken the following steps:
I have
"styles": [ "src/styles.scss" ]
in my angular.json file, and in styles.scss I import tailwind:
#import "tailwindcss/base";
#import "tailwindcss/components";
#import "tailwindcss/utilities";
In my tailwind.config.js I have:
module.export = {
purge: {
enabled: true,
content: ["./src/**/*.{html,ts}"]
},
...
}
but styles are still not applied. What else do I need to do to get styles to apply correctly?
Related
Just started using tailwindcss in a Next.js project.
I set it up through my CSS file, and was trying to setup some basics for headers h1, h2, ... but I like separating the logic a bit so it doesn't get too messy, so I tried to `#import './typography.css' which includes some tailwind, but it doesn't work.
Here is my base CSS file:
#tailwind base;
#tailwind components;
#tailwind utilities;
#tailwind variants;
#import './typography.css';
My typography:
h1 {
#apply text-6xl font-normal leading-normal mt-0 mb-2;
}
...
Any ideas on how I can get this to work?
Update
I've tried:
Added #layer base in my typography.css file, but receive an error: Syntax error: /typography.css "#layer base" is used but no matching #tailwind base
Also tried do it at the import layer, eg #layer base { #import("typography.css") }, that doesn't create an error but the styles aren't applied.
You need set the target layer for this to work.
Since you want to change the base html elements in your typography.css file do:
#layer base {
h1 {
#apply text-6xl font-normal leading-normal mt-0 mb-2;
}
}
More details in the documentation here: https://tailwindcss.com/docs/adding-base-styles
Based on the docs from tailwind, here is a TLDR;
Install
npm install -D postcss-import
Update your postcss.config.js
// /postcss.config.js
module.exports = {
plugins: {
"postcss-import": {}, // <= Add this
tailwindcss: {},
autoprefixer: {}
}
}
Then in your main css file where you have the imports, you need to:
rename the tailwindcss imports to from #import base; to #import "tailwindcss/base"; (same for the components and utilities
Then you need to import in the proper order. If the file is a base put it after the base import, it's a components, put it after the components
#import "tailwindcss/base"; // <= used to be `#tailwind base;`
#import "./custom-base-styles.css";
#import "tailwindcss/components"; // <= used to be `#tailwind components;`
#import "./custom-components.css";
#import "tailwindcss/utilities"; // <= used to be `#tailwind utilities;`
#import "./custom-utilities.css";
Then in your custom-base-styles.css you can:
#layer base {
h1 {
#apply text-3xl text-slate-800;
}
}
According to the docs the issue is a matter of the order of the statements. They recommend to put the #tailwind base; statement in a seperate file and import it like this:
#import "./tailwind-base-statement.css";
#import "./typography.css";
You must use postcss-import
https://tailwindcss.com/docs/adding-custom-styles#using-multiple-css-files
https://tailwindcss.com/docs/using-with-preprocessors#build-time-imports
if you use Laravel webpack mix, add it in .postCss(....)
.postCss('resources/css/app.css', 'public/css', [
require('postcss-import'), // <------------ add postcss-import here
require('tailwindcss'),
])
used poscss and postcss-import-plugin import plugin
npm install -D postcss-import
update postcss.config.js file
module.exports = {
plugins: {
'postcss-import': {},
tailwindcss: {},
}
}
add #tailwind base; inside top of your typography.css
for more deatils you can check this link:
https://tailwindcss.com/docs/using-with-preprocessors#build-time-imports
I found something that seems to work for me.
Basically postcss-import has its own layer system that we can use instead of tailwinds layer system.
#import 'tailwindcss/base' layer(Base);
#import './base/typography.css' layer(Base);
#import 'tailwindcss/components' layer(Components);
#import 'tailwindcss/utilities' layer(Utilities);
#layer Base {
#root {
#apply some-styles;
}
}
In postcss-import#usage it describes using layer() with #import
...
#import 'baz.css' layer(baz-layer);
...
I used uppercase layer names to avoid conflicting with tailwinds layers.
Install postcss-import as described in tailwinds article.
using-with-preprocessors#build-time-imports
Then add layer() to your imports like #import 'tailwindcss/base' layer(Base).
Also rename your #layers calls to something different than tailwinds layers.
For examples you can look any of the test fixtures with layer in the filename.
postcss-import/test/fixtures
UPDATE
The root cause of this for me was using Create React App.
Because it doesn't allow you to configure postcss.config.js.
So another solution would be to migrate to something else instead.
darekkay/create-react-app-to-vite#migration
tailwindcss.com/issues/1472
tailwindcss/guides/create-react-app
we highly recommend using Vite, Next.js, Remix, or Parcel instead of Create React App
I have modular CSS (using Sass) and my webpack is throwing errors when I use Tailwind's #apply with some classes. Some of them works, some don't and I can't figure out why. It's working inline in HTML but not in CSS file.
gallery.scss
.c-gallery-thumbnails {
#apply space-x-3;
}
base.scss
#import "tailwindcss/base";
#import "tailwindcss/components";
#import "tailwindcss/utilities";
import "gallery"
webpack
module: {
rules: [
{
test: /\.[ps]?css$/,
use: ExtractTextPlugin.extract({
use: [
'css-loader',
'resolve-url-loader',
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
],
},
},
'sass-loader',
],
}),
},
...
And error:
#apply cannot be used with .space-x-3 because .space-x-3 either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that .space-x-3 exists, make sure that any #import statements are being properly processed before Tailwind CSS see
s your CSS, as #apply can only be used for classes in the same CSS tree.
Have a read of this: https://tailwindcss.com/docs/using-with-preprocessors/
For the most cohesive development experience, it's recommended that you use PostCSS exclusively.
Please try to import the .css file where space-x-3 css rule is defined in gallery.scss.
I'm using Bulma.io in an Angular 8 project and I've install Bulma with this command: npm install bulma. After that I've included the styles in my angular.json file:
"styles": [
"src/styles.css",
"node_modules/bulma/css/bulma.css"
],
"stylePreprocessorOptions": {
"includePaths":
"node_modules",
"node_modules/bulma/sass/utilities"
]
},
I can work with Bulma but I can't override the variables to change, for instance, the background color of a navbar.
Here's my scss file that overrides the background-color of a navbar:
#import 'horizontal-navbar.component.css';
#import 'initial-variables';
#import "functions";
#import "bulma";
$navbar-background-color: #fff;
What am I doing wrong?
Thanks in advance.
We can import this as we do it with node sass
First save the bulma package
npm install bulma --save
then go to the style.scss and give the below code
// Set your brand colors
$purple: #8a4d76;
$pink: #fa7c91;
$brown: #757763;
$beige-light: #d0d1cd;
$beige-lighter: #eff0eb;
// Update Bulma's global variables
$family-sans-serif: 'Nunito', sans-serif;
$grey-dark: $brown;
$grey-light: $beige-light;
$primary: $purple;
$link: $pink;
$widescreen-enabled: false;
$fullhd-enabled: false;
// Update some of Bulma's component variables
// $body-background-color: $beige-lighter;
$body-background-color: #fff;
$control-border-width: 2px;
$input-border-color: transparent;
$input-shadow: none;
// Import only what you need from Bulma
#import '~node_modules/bulma/sass/utilities/_all';
#import '~node_modules/bulma/sass/base/_all';
#import '~node_modules/bulma/sass/elements/button';
#import '~node_modules/bulma/sass/elements/container';
#import '~node_modules/bulma/sass/elements/title';
#import '~node_modules/bulma/sass/form/_all';
#import '~node_modules/bulma/sass/components/navbar';
#import '~node_modules/bulma/sass/layout/hero';
#import '~node_modules/bulma/sass/layout/section';
I took this example from https://bulma.io/documentation/customize/with-node-sass/
I'm very new to react-slick. I've followed the installation instruction, but the slider doesn't come with CSS styles. My React project was created by create-react-app.
slick.css and slick-theme.css are imported styles.scss which is a file that I made to import the slick CSS files. As you see my css-loader set up in webpack.config.js, class names are supposed to be changed following localIdentName.
Because of that, the class names are converted in CSS, and my class names in HTML stay the same. Therefore, they don't match. How can I match them?
webpack.config.dev.js
test: /\.(css|scss)$/,
use: [
require.resolve("style-loader"),
{
loader: require.resolve("css-loader"),
options: {
importLoaders: 1,
modules: true,
localIdentName: "[path][name]__[local]--[hash:base64:5]",
camelCase: "dashes"
}
},
...
styles.scss
#import "slick-carousel/slick/slick.css";
#import "slick-carousel/slick/slick-theme.css";
...
In your style.scss files put this
:global {
#import 'node_modules/slick-carousel/slick/slick';
}
Adding :global will prevent css modules from renaming them
I am struggling to convert an Angular 2 project to Angular 4 using angular-cli and webpack. I am running into an issue accessing image assets from my scss files. I believe that my problem is being caused by the way that the directory structure of my scss files are being flattened. Within the src directory of my project I have a stlyes sub-directory and an assets sub-directory (which is a sibling of the styles directory). Both directories have nested child directories. My current belief in that the assets directory when packaged has keeps its sub-directory structure and the styles directory is flattened, thus causing relative references to assets from the flattened css to be incorrect.
For example /src/styles/partials/_sprite.scss:
.icon {
background: url("../../assets/images/sprite-svg-ui.svg") no-repeat;
}
Within my IDE this reference resolves correctly, but when built by the angular-cli I get the following error:
ERROR in ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader?{"ident":"postcss"}!./~/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/styles/index.scss
Module not found: Error: Can't resolve '../../assets/images/sprite-svg-ui.svg' in 'C:\Users\jhart\Desktop\pascal.ui\src\styles'
# ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader?{"ident":"postcss"}!./~/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/styles/index.scss 6:43140-43188
# ./src/styles/index.scss
# multi ./src/styles/index.scss
Here's my .angular-cli.json file:
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"project": {
"name": "ui"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets"
],
"index": "index.html",
"main": "index.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"./styles/index.scss"
],
"scripts": [
"dot.dot.dot.js"
],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"project": "src/tsconfig.app.json"
},
{
"project": "src/tsconfig.spec.json"
},
{
"project": "e2e/tsconfig.e2e.json"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "scss",
"component": {},
"serve": {
"port": 3000
}
}
}
Here's my index.scss file referenced within the within the apps\styles element of the .angular-cli.json file:
// globals
#import 'functions';
#import 'variables';
#import 'mixins';
#import 'base';
#import 'boxer';
// partials
#import 'partials/grid';
#import 'partials/sprite';
#import 'partials/typography';
#import 'partials/buttons';
#import 'partials/forms';
#import 'partials/tables';
#import 'partials/utility';
// vendors
// #import 'vendors/chosen';
#import 'vendors/chartist/chartist';
#import 'vendors/ng2-select';
// component (declarations)
#import 'partials/wrapper';
#import 'partials/header';
#import 'partials/navigation-primary';
#import 'partials/footer';
#import 'partials/upload-meter';
#import 'partials/pagination';
#import 'partials/breadcrumb';
#import 'partials/tabs';
#import 'partials/cards';
#import 'partials/badges';
#import 'partials/flyouts';
#import 'partials/comments';
#import 'partials/tutorial';
#import 'partials/year-selector';
#import 'partials/upload-window';
#import 'partials/panels';
#import 'partials/charts';
#import 'partials/lists';
#import 'partials/collapse';
#import 'partials/tooltips';
#import 'partials/login';
#import 'partials/settings';
#import '../app/modules/core/components/notification-banner/styles';
// component (declarations)
#import 'partials/cbcr-view';
// directives
#import '../app/modules/core/directives/menu/menu';
Update 1
I have discovered that referencing the image assets via an absolute path /app/assets/images/ allows build to resolve the image files, but now the reference to the image files within my IDE are invalid...
When running the application build with the absolute path /app/assets/images/ I get a 404 when loading an image file...
Update 2
I changed the prefix parameter in my .angular-cli.json to "" and then from my /src/styles/partials/_sprite.scss file I reference my image assets using an absolute path /assets/images/, for example:
.icon-close {
background: url("/assets/images/close.svg") no-repeat;
width: 24px;
height: 24px;
}
My IDE is still unable to resolve the images files... but at least it builds and executes.
I faced this problem and I solved it by putting the absolute path of the image depending on the location of the "index.scss" file in your case, not depending on the imported sub-sass file "_sprite.scss". This will give you an error a reference error from the IDE but it will work you won't get an error from webpack. I hope it helps.