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!
Related
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: {
}
}
Tailwind css file very big 2.42 mib how can i reduce size this file am using laravel ?
Edit your tailwind.config.js and set purge.enabled = true:
const tailwindcss = require('tailwindcss');
module.exports = {
purge: {
enabled: true,
content: ['./src/**/*.{vue,js,ts,jsx,tsx}']
},
...
};
Tailwind CSS - Optimizing for Production
The best strategy is to use generate a specific CSS specific to your need and deploy it on your own CDN
Below an example that explains how to configure TailwindCSS for a simple Html Project
First Step: create a package.json file
yarn init
Add tailwindcss postcss-cli and autoprefixer
yarn add tailwindcss postcss-cli autoprefixer -D
yarn add tailwindcss postcss-cli autoprefixer -D
Create a default configuration file for TailwindCSS
npx tailwind init tailwind.js -full
Create a postcss.config.js file
touch postcss.config.js
Edit the postcss.config.js
const tailwindcss = require('tailwindcss');
module.exports = {
plugins: [
tailwindcss('./tailwind.js'),
require('autoprefixer')
],
purge: [
'./src/**/*.html',
],
};
Create a tailwind.css as follow
#import "tailwindcss/base";
#import "tailwindcss/components";
#import "tailwindcss/utilities";
Use postcss to generate the stylesheet style.css
npx postcss tailwind.css -o style.css
Use the stylesheet in your project
<html>
<head>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<h1>Hello world</h1>
</body>
</html>
Deploy the style.css on a CDN
(Possible CDN : CloudFront / Netlify)
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
I'm using Laravel 5.6, Laravel Mix 2.0, and Bootstrap-Vue 2.0.0-rc.1.
Trying to find a way to configure Laravel Mix to include Bootstrap-Vue's CSS into my app.css file and prevent Bootstrap-Vue from including <style> tags into the page <head>.
I saw this note in the package docs but still not sure how to use this properly:
Note: requires webpack configuration to load css files (official guide)
Finally, found a solution - ExtractTextPlugin.
let mix = require('laravel-mix');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
mix.webpackConfig({
module: {
rules: [
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
}
]
}
});
Reference: https://github.com/JeffreyWay/laravel-mix/issues/1589
Install:
npm i bootstrap-vue
npm install --save-dev style-loader css-loader
Use:
edit resources/js/app.js to:
import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue)
edit resources/sass/app.scss to:
Import the styles:
import '~bootstrap/dist/css/bootstrap.css'
import '~bootstrap-vue/dist/bootstrap-vue.css'
Make sure the app.js and app.css are included in the blade(view) that is acting as the container for your vue.
See: https://bootstrap-vue.js.org/docs/
I'm trying to create a custom build of bootstrap 4 using webpack, but it won't compile.
I have bootstrap 4 here:
/node_modules/bootstrap/scss
I create my own app.scss file to import the various parts of bootstrap that I want:
#import "variables";
#import "mixins";
#import "custom";
....
In my webpack file I have:
mix.sass('resources/assets/sass/app.scss', 'public/css', null, { includePaths: ['node_modules/bootstrap/scss/'] });
I've also tried:
mix.sass('resources/assets/sass/app.scss', 'public/css', { includePaths: ['node_modules/bootstrap/scss/'] });
You can import bootstrap in app.scss with:
..
#import "~bootstrap/scss/variables"
#import "~bootstrap/scss/mixins"
..
The ~bootstrap is resloved to the npm package. This way you won't have to configure the mix file.