My Issue
My h3 font-weight override doesn't appear to work.
#tailwind base;
h3{
#apply font-thin;
}
#tailwind components;
#tailwind utilities;
h3{
#apply font-thin;
}
As you can see in the image, the layout.css coming from Tailwind takes precedence over my styles.scss
Some more background:
Gatsby project with PostCSS and SASS plugin (I've copied the relevant gatsby-config.js here:
module.exports = {
plugins: [
`gatsby-plugin-postcss`,
{
resolve: `gatsby-plugin-sass`,
options: {
postCssPlugins: [
require("tailwindcss"),
require("./tailwind.config.js"), // Optional: Load custom Tailwind CSS configuration
],
}
},
],
}
Oh I figured out the issue, layout.css isn't from Tailwinds ... it's boilerplate from Gatsby starter theme.
Found it and removed it from src/components/layout.js
Related
I hope this help to you to fix this case:
I have a app created with next configuration:
npx create-react-app my-project
cd my-project
Next I config Sass
npm install sass
# or
yarn add sass
Next I updated my files .css by .scss (src/index.css by src/index.scss)
Next step, in public folder in my html add the next code
<style lang="sass">
#import url("src/index.scss");
</style>
To install tailwind:
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Add the paths to all of your template files in your tailwind.config.js file.
/** #type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
Next add the #tailwind directives for each of Tailwind’s layers to your ./src/index.scss file.
#tailwind base;
#tailwind components;
#tailwind utilities;
Finally
You can use all Tailwind classes in any path where you have your project components inside the "./src" path
I hope it helps you!
I'm trying to build two separate CSS files using Tailwindcss, Laravel and vite-plugin.
The two css files use different configuration, but I have no idea how specify the correct tailwind.config.js for each builds.
app.css should use tailwind.config.js
mail.css should use tailwind-mail.config.js
vite.config.js
import { defineConfig } from "vite"
import laravel from "laravel-vite-plugin"
export default defineConfig({
plugins: [
laravel({
input: ["resources/css/app.css", "resources/js/app.js", "resources/css/mail.css"]
refresh: true,
})
]
})
postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
tailwind.config.js
module.exports = {
content: [
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
'./vendor/laravel/jetstream/**/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
],
theme: {},
plugins: [require("#tailwindcss/forms"), require("#tailwindcss/typography")],
}
tailwind-mail.config.js
module.exports = {
content: ["./resources/views/mails/**/*.blade.php"],
theme: {},
plugins: [require("#tailwindcss/typography")],
}
I haven't try myself yet, but reading the release notes of Tailwind CSS v3.2 it should be fairly easy to split into two CSS files using #config <filename>:
app.css
#config "./tailwind.config.js";
#tailwind base;
#tailwind components;
#tailwind utilities;
mail.css
#config "./tailwind.mail.config.js";
#tailwind base;
#tailwind components;
#tailwind utilities;
vite.config.js
import { defineConfig } from "vite"
import laravel from "laravel-vite-plugin"
export default defineConfig({
plugins: [
laravel({
input: ["resources/css/app.css", "resources/js/app.js", "resources/css/mail.css"]
refresh: true,
})
]
})
I'm trying to replace the Tailwindcss compiler with #tailwindcss/jit in a Laravel project that is using Vue Laravel Mix but I'm getting this Unknown word error.
✖ Mix Compiled with some errors in 489.07ms
ERROR in ./resources/sass/app.scss Module build failed (from
./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from
./node_modules/postcss-loader/dist/cjs.js): SyntaxError
(1:1) /Users/username-76/Desktop/projectname/resources/sass/app.scss
Unknown word
1 | import api from "!../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js";
| ^ 2 | import content from "!!../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].oneOf[1].use[1]!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].oneOf[1].use[2]!../../node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].oneOf[1].use[3]!./app.scss";
3 |
at processResult (/Users/username-76/Desktop/projectname/node_modules/webpack/lib/NormalModule.js:701:19)
at /Users/username-76/Desktop/projectname/node_modules/webpack/lib/NormalModule.js:807:5
at /Users/username-76/Desktop/projectname/node_modules/loader-runner/lib/LoaderRunner.js:399:11
at /Users/username-76/Desktop/projectname/node_modules/loader-runner/lib/LoaderRunner.js:251:18
at context.callback (/Users/username-76/Desktop/projectname/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
at Object.loader (/Users/username-76/Desktop/projectname/node_modules/postcss-loader/dist/index.js:140:7)
1 ERROR in child compilations (Use 'stats.children: true' resp.
'--stats-children' for more details) webpack compiled with 2 errors
app.scss
/* purgecss start ignore */
#tailwind base;
#tailwind components;
/* purgecss end ignore */
#tailwind utilities;
html, body {
#apply font-sans;
#apply text-darkblue;
}
webpack.mix.js
const mix = require('laravel-mix');
mix.disableSuccessNotifications();
mix.js('resources/js/app.js', 'public/js').vue();
mix.postCss("resources/sass/app.scss", "public/css", [
require("#tailwindcss/jit"),
]);
mix.version();
You're using the PostCSS plugin, yet you are attempting to compile SASS. Do it the following way instead.
.postCss('resources/css/app.css', 'public/css', [
require('tailwindcss')
])
.options({
postCss: [ tailwindcss('./tailwind.config.js') ],
})
Your app.css would include Tailwind:
#import 'tailwindcss/base';
#import 'tailwindcss/components';
#import 'tailwindcss/utilities';
And then in your tailwind.config.js would include the just-in-time mode.
module.exports = {
mode: 'jit',
/* These paths are just examples, customize
them to match your project structure
*/
purge: [
'./storage/framework/views/*.php',
'./resources/**/*.blade.php',
'./resources/**/*.js',
'./resources/**/*.vue',
],
theme: {
}
}
I am using tailwind with laravel mix and postcss. I get the error:
#apply cannot be used with .text-grey-default because .text-grey-default either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that .text-grey-default exists, make sure that any #import statements are being properly processed before Tailwind CSS sees your CSS, as #apply can only be used for classes in the same CSS tree.
I thought that is because is not in the same CSS file but I am using postcss-import to overcome this. The tag body doesn't have any pseudo-selector, and all the imports are at the top of the file. I really can't understand where this problem comes from and how to solve it.
app.scss
#import "tailwindcss/base";
#import "tailwindcss/components";
#import "variables";
#import url("https://fonts.googleapis.com/css?family=Nunito");
#import "#fortawesome/fontawesome-free/css/all.min.css";
body {
#apply text-grey-default;
}
webpack.mix.js
let mix = require("laravel-mix");
let tailwindcss = require("tailwindcss");
let atImport = require('postcss-import');
mix.js("resources/js/app.js", "public/js")
.sass("resources/sass/app.scss", "public/css")
.options({
processCssUrls: false,
postCss: [
atImport(),
tailwindcss("./tailwind.config.js"),
]
})
.version();
tailwind.config.js
let colors = {
"grey-default": "#636b6f",
};
module.exports = {
colors: colors,
textColors: colors,
options: {
prefix: "",
important: false,
separator: ":"
}
};
I have understood my mistake. I forgot to put colors and text Colors in theme:{} in my tailwind config.
I'm trying to use #apply in my sass file, and getting the error in the title when I do npm run dev or npm run watch. I'm using Laravel, and using Laravel Mix. Here is my webpack.mix.js
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.options({
processCssUrls: false,
postCss: [ tailwindcss('./tailwind.config.js') ],
});
This exists in my app.css
...
.bg-blue {
background-color: #47cdff;
}
My app.scss:
// Tailwind CSS
#tailwind base;
#tailwind components;
#tailwind utilities;
// Custom CSS
.section {
#apply .px-4;
}
.button {
#apply .bg-blue .text-white .no-underline .rounded-lg .text-sm .py-2 .px-5;
box-shadow: 0 2px 7px 0 #b0eaff;
}
Just override the default color pallete, you can do so using the theme.colors section of your tailwind.config.js file :
theme: {
colors: {
white: '#FFFFFF',
blue: '#007ace',
}
}
Then an easy trick never mix regular CSS and imports in the same file. Instead, create one main entry-point file for your imports, and keep all of your actual CSS in separate files.