Skip to content

Latest commit

 

History

History
 
 

laravel-postcss-only

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
app
app
 
 
bootstrap
bootstrap
 
 
config
config
 
 
database
database
 
 
public
public
 
 
resources
resources
 
 
routes
routes
 
 
storage
storage
 
 
tests
tests
 
 
.editorconfig
.editorconfig
 
 
.env.example
.env.example
 
 
.gitattributes
.gitattributes
 
 
.gitignore
.gitignore
 
 
.styleci.yml
.styleci.yml
 
 
README.md
README.md
 
 
artisan
artisan
 
 
composer.json
composer.json
 
 
composer.lock
composer.lock
 
 
package-lock.json
package-lock.json
 
 
package.json
package.json
 
 
phpunit.xml
phpunit.xml
 
 
server.php
server.php
 
 
tailwind.config.js
tailwind.config.js
 
 
webpack.mix.js
webpack.mix.js
 
 

README.md

Laravel (PostCSS-only)

To set up Tailwind with Laravel start by installing Tailwind and postcss-import:

npm install tailwindcss postcss-import

Next, create a CSS file for your Tailwind styles. We've stored in it resources/css/tailwind.css for this example:

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

Next, add your CSS file to your webpack.mix.js file and configure the postcss-import and tailwindcss PostCSS plugins:

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/tailwind.css', 'public/css/tailwind.css', [
        require('postcss-import'),
        require('tailwindcss'),
    ]);

Finally, import that CSS file in your Blade templates/layout:

<!-- ... --->
<head>
    <!-- ... --->
    <link href="{{ asset('css/tailwind.css') }}" rel="stylesheet">
</head>
<!-- ... --->

If you'd like to customize your Tailwind configuration, run tailwind init to create a tailwind.config.js file in your project root.