tailwindlabs / webpack-starter Goto Github PK

View Code? Open in Web Editor NEW

214.0 214.0 83.0 310 KB

A quick and simple example of using Tailwind CSS with Webpack.

License: MIT License

JavaScript 65.31% CSS 5.07% HTML 29.62%

webpack-starter's People

Contributors

Stargazers

Watchers

webpack-starter's Issues

webpack --watch does not work!

The instruction:

After that, start up Webpack:

webpack --watch

is wrong!

It should be:

npm run watch

upgrade to webpack 4

How to change the output directory for the compiled files

Hey team - I'd like to change the directory where the compiled files are saved. I tried searching but my webpack skills are a bit sub-par, so I figured I'd see if anyone here has any ideas. Thanks for the help!

Help with webpack2 postcss.config.js

Can somebody please help with how to configure tailwind with webpack , can somebody let me know how to pass the config file path ?

 module.exports = {
 plugins: {
 'postcss-import': {},
   'tailwindcss': {  /* how to pass path to config file */ },
 'postcss-cssnext': {
  browsers: ['last 2 versions', '> 5%'],
},
  'autoprefixer': {},
},
};

TypeError: Cannot read property 'properties' of undefined

After cloning Webpack-starter and running "npm install", I run "npm run dev" but its continuously giving above error. what is the reason of this?

Here is my "package.josn"

extract-text-webpack-plugin should not be used with webpack 4

The extract-text-webpack-plugin readme clearly states, that it should not be used with webpack 4. Instead, mini-css-extract-plugin should be used.

This example should be updated accordingly.

build failed: atRule.before is not a function

I am always getting atRule.before is not a function error when building.

here is my package.json

"devDependencies": {
    "autoprefixer": "^9.5.1",
    "babel-loader": "^5.3.2",
    "bootstrap": "4.0.0-alpha.5",
    "bootstrap-touchspin": "^3.1.1",
    "bourbon": "^4.2.6",
    "css-loader": "^0.27.3",
    "expose-loader": "^0.7.3",
    "extract-text-webpack-plugin": "^2.1.0",
    "file-loader": "^0.10.1",
    "flexibility": "^1.0.5",
    "jquery": "^2.1.4",
    "material-design-icons": "^2.1.3",
    "node-sass": "^4.12.0",
    "notosans-fontface": "~1.0.1",
    "postcss-flexibility": "^1.0.2",
    "postcss-loader": "^1.3.3",
    "sass-loader": "^6.0.3",
    "style-loader": "^0.14.0",
    "tailwindcss": "^1.0.1",
    "tether": "^1.1.1",
    "velocity-animate": "^1.2.3",
    "webpack": "^2.2.1",
    "webpack-sources": "^0.1.0"
  },
  "dependencies": {
    "fsevents": "^2.0.6",
    "postcss": "^7.0.16"
  }

Here is my webpack.config.js

const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");

let config = {
  entry: {
    main: [
      './js/theme.js',
      './css/theme.scss',
      './css/tailwind.css'
    ]
  },
  output: {
    path: path.resolve(__dirname, '../assets/js'),
    filename: 'theme.js'
  },
  module: {
    rules: [
      {
        test: /\.js/,
        loader: 'babel-loader'
      },
      {
        test: /\.scss$/,
        use: 
          ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use: [
              {
                loader: 'css-loader',
                options: {
                  minimize: true
                }
              },
              'postcss-loader',
              'sass-loader'
            ]
          }),
      },
      {
        test: /.(png|woff(2)?|eot|ttf|svg|gif)(\?[a-z0-9=\.]+)?$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '../css/[hash].[ext]'
            }
          }
        ]
      },
      {
        test : /\.css$/,
        // use: [
        //   'style-loader', 
        //   { 
        //     loader: 'css-loader', 
        //     options: { 
        //       importLoaders: 1 
        //     } 
        //   }, 
        //   {
        //     loader: 'postcss-loader',
        //     options: {
        //       ident: 'postcss',
        //       plugins: [
        //         require('tailwindcss'),
        //         require('autoprefixer'),
        //       ],
        //     },
        //   }
        // ]
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            { loader: 'css-loader', options: { importLoaders: 1 } },
            'postcss-loader',
          ],
        })
      }
    ]
  },
  externals: {
    prestashop: 'prestashop',
    $: '$',
    jquery: 'jQuery'
  },
  plugins: [
    new ExtractTextPlugin(path.join('..', 'css', 'theme.css')),
    // require('tailwindcss')
  ]
};

if (process.env.NODE_ENV === 'production') {
  config.plugins.push(
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: false,
      compress: {
        sequences: true,
        conditionals: true,
        booleans: true,
        if_return: true,
        join_vars: true,
        drop_console: true
      },
      output: {
        comments: false
      },
      minimize: true
    })
  );
}

module.exports = config;

having trouble running dev server

I installed and ran npm run dev but got TypeError: Cannot read property 'properties' of undefined.
I was running node 8.9.1 through nvm. Full message read
npm run dev

@ dev /Users/justinchristensen/Sandbox/Try-Out-Projects/Tailwind/Proj-One/webpack-starter
cross-env NODE_ENV=development webpack-dev-server

/Users/justinchristensen/Sandbox/Try-Out-Projects/Tailwind/Proj-One/webpack-starter/node_modules/webpack-cli/bin/config-yargs.js:89
describe: optionsSchema.definitions.output.properties.path.description,
^

TypeError: Cannot read property 'properties' of undefined
at module.exports (/Users/justinchristensen/Sandbox/Try-Out-Projects/Tailwind/Proj-One/webpack-starter/node_modules/webpack-cli/bin/config-yargs.js:89:48)
at Object. (/Users/justinchristensen/Sandbox/Try-Out-Projects/Tailwind/Proj-One/webpack-starter/node_modules/webpack-dev-server/bin/webpack-dev-server.js:84:40)
at Module._compile (module.js:635:30)
at Object.Module._extensions..js (module.js:646:10)
at Module.load (module.js:554:32)
at tryModuleLoad (module.js:497:12)
at Function.Module._load (module.js:489:3)
at Function.Module.runMain (module.js:676:10)
at startup (bootstrap_node.js:187:16)
at bootstrap_node.js:608:3
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ dev: cross-env NODE_ENV=development webpack-dev-server
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Sorry if this dumb question, I just really wanted to get started with Tailwind.

ERROR in ./src/styles.css

I've been trying to figure this out for the past couple of hours... I could be dumb I dont know but I would be greatful if somone can point me in the right direction.

after installing everything I run npm run dev then this happens (when I used tailwindccs before I never had this issuse before)

ERROR in ./src/styles.css
Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/lib/index.js):
Error: Cannot find module 'tailwindcss/plugins/container'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:582:15)
at Function.Module._load (internal/modules/cjs/loader.js:508:25)
at Module.require (internal/modules/cjs/loader.js:637:17)
at require (internal/modules/cjs/helpers.js:22:18)
at Object. (C:\Users\EYT57\Desktop\tailwindcss\tailwind.js:902:5)
at Module._compile (internal/modules/cjs/loader.js:701:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
at Module.load (internal/modules/cjs/loader.js:600:32)
at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
at Function.Module._load (internal/modules/cjs/loader.js:531:3)
at runLoaders (C:\Users\EYT57\Desktop\tailwindcss\node_modules\webpack\lib\NormalModule.js:301:20)
at C:\Users\EYT57\Desktop\tailwindcss\node_modules\loader-runner\lib\LoaderRunner.js:367:11
at C:\Users\EYT57\Desktop\tailwindcss\node_modules\loader-runner\lib\LoaderRunner.js:233:18
at context.callback (C:\Users\EYT57\Desktop\tailwindcss\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
at Promise.resolve.then.then.catch (C:\Users\EYT57\Desktop\tailwindcss\node_modules\postcss-loader\lib\index.js:194:71)

ERROR in ./src/styles.css (./node_modules/css-loader??ref--4-2!./node_modules/postcss-loader/lib!./src/styles.css)
Module build failed (from ./node_modules/postcss-loader/lib/index.js):
Error: Cannot find module 'tailwindcss/plugins/container'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:582:15)
    at Function.Module._load (internal/modules/cjs/loader.js:508:25)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Object.<anonymous> (C:\Users\EYT57\Desktop\tailwindcss\tailwind.js:902:5)
    at Module._compile (internal/modules/cjs/loader.js:701:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
    at Function.Module._load (internal/modules/cjs/loader.js:531:3)

Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js??ref--4-2!node_modules/postcss-loader/lib/index.js!src/styles.css:
Entrypoint undefined = extract-text-webpack-plugin-output-filename
[./node_modules/css-loader/index.js?!./node_modules/postcss-loader/lib/index.js!./src/styles.css] ./node_modules/css-loader??ref--4-2!./node_modules/postcss-loader/lib!./src/styles.css 839 bytes {0} [built] [failed] [1 error]

ERROR in ./src/styles.css (./node_modules/css-loader??ref--4-2!./node_modules/postcss-loader/lib!./src/styles.css)
Module build failed (from ./node_modules/postcss-loader/lib/index.js):
Error: Cannot find module 'tailwindcss/plugins/container'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:582:15)
    at Function.Module._load (internal/modules/cjs/loader.js:508:25)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Object.<anonymous> (C:\Users\EYT57\Desktop\tailwindcss\tailwind.js:902:5)
    at Module._compile (internal/modules/cjs/loader.js:701:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
    at Function.Module._load (internal/modules/cjs/loader.js:531:3)

TypeError: Cannot read property 'properties' of undefined

describe: optionsSchema.definitions.output.properties.path.description,
^
TypeError: Cannot read property 'properties' of undefined

google search gives this as a fix...

which calls for an updated package.json.

 "webpack": "^4.20.2",
 "webpack-cli": "^3.1.1",

fixed the problem for me on windows 8, node 10.12

for development should be applied webpack-dev-server

For now, watch mode just builds files, and rebuild them, but for watching changes in a browser you should use some plugins.
Will be great to use webpack dev server to automatically reload the page.

@apply can not be used (with postcss-import and webpack)

I have this error:

    ERROR in ./assets/main/components/components-critical.css (./node_modules/css-loader??ref--4-2!./node_modules/postcss-loader/lib!./assets/main/components/components-critical.css)
    Module build failed: Syntax Error 
    
    (2:5) `@apply` cannot be used with `.w-full` because `.w-full` either cannot be found, or it's actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that `.w-full` 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.
    
      1 | .nav {
    > 2 |     @apply .w-full;
        |     ^
      3 | }
      4 |

And I do not know where this problem occures

My webpack.config:

const path = require('path');
const ManifestPlugin = require('webpack-manifest-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = function (env, argv) {
  return {
    entry: {
      'main-base': [
        './assets/main/base/index.css',
      ],
      'main-components-critical': [
        './assets/main/components/index-critical.js',
      ],
      'main-components': [
        './assets/main/components/index.js',
      ],
      'react': [
        './assets/main/components/react.js',
      ],
      'main-utilities': [
        './assets/main/utilities/index.css',
      ],
    },
    output: {
      path: path.resolve(__dirname, 'web/public/assets'),
      filename: '[name].[hash].js',
      chunkFilename: '[name].[hash].js'
    },
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            'style-loader',
            MiniCssExtractPlugin.loader,
            {
              loader: 'css-loader',
              options: {
                importLoaders: 1,
                minimize: argv['mode'] === 'production'
              }
            },
            'postcss-loader'
          ]
        },
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: ['babel-loader']
        }
      ]
    },
    plugins: [
      new ManifestPlugin(),
      new MiniCssExtractPlugin({
        // Options similar to the same options in webpackOptions.output
        // both options are optional
        filename: '[name].[hash].css',
        chunkFilename: '[name].[hash].css'
      })
    ]
  }
};

Tailwind preflight is in assets/main/base/index.css (@import 'tailwindcss/preflight';)
Tailwind utilities is in assets/main/utilities/index.css (@import 'tailwindcss/utilities';)

And in assets/main/components/navigation/style-critical.css I have the @apply this stylesheet is imported in assets/main/components/components-critical.css (@import './navigation/style-critical.css';)

I think everything is configured as expected from tailwind
postcss.config.js

module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss')('./tailwind.js'),
    require('postcss-cssnext'),
    require('postcss-flexbugs-fixes')
  ]
};

and package.json

  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.11",
    "install": "^0.10.4",
    "mini-css-extract-plugin": "^0.4.0",
    "postcss-cssnext": "^3.1.0",
    "postcss-flexbugs-fixes": "^3.3.0",
    "postcss-import": "^11.1.0",
    "postcss-loader": "^2.1.3",
    "react": "^16.3.1",
    "react-dom": "^16.3.1",
    "react-router-dom": "^4.2.2",
    "rimraf": "^2.6.2",
    "style-loader": "^0.20.3",
    "tailwindcss": "^0.5.2",
    "webpack": "^4.5.0",
    "webpack-cli": "^2.0.14",
    "webpack-manifest-plugin": "^2.0.0-rc.2"
  },

If you need more information let me know. I do not know what I am doing wrong :(

including html partials?

Any idea if there's a way to modularize the html, such as having footer & header out in their own files but getting loaded into index.html during the build?

Tapable.plugin is deprecated.

I get the following error while running npm run watch:

Gebruiker@DESKTOP-PA5RD2S MINGW64 ~/desktop/poll (master)
$ npm run watch

> [email protected] watch C:\Users\Gebruiker\desktop\poll
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=webpack.config.js

  0% compiling
Webpack is watching the files…

(node:18800) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead                                                                 77% module and chunk tree optimization unnamed compat pluginC:\Users\Gebruiker\desktop\poll\node_modules\webpack\lib\Chunk.js:460
                throw new Error(
                ^

Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
    at Chunk.get (C:\Users\Gebruiker\desktop\poll\node_modules\webpack\lib\Chunk.js:460:9)
    at C:\Users\Gebruiker\desktop\poll\node_modules\extract-text-webpack-plugin\dist\index.js:176:48
    at Array.forEach (<anonymous>)
    at C:\Users\Gebruiker\desktop\poll\node_modules\extract-text-webpack-plugin\dist\index.js:171:18
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\Gebruiker\desktop\poll\node_modules\tapable\lib\HookCodeFactory.js:24:12), <anonymous>:12:1)
    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (C:\Users\Gebruiker\desktop\poll\node_modules\tapable\lib\Hook.js:35:21)
    at Compilation.seal (C:\Users\Gebruiker\desktop\poll\node_modules\webpack\lib\Compilation.js:881:27)
    at hooks.make.callAsync.err (C:\Users\Gebruiker\desktop\poll\node_modules\webpack\lib\Compiler.js:480:17)
    at _err0 (eval at create (C:\Users\Gebruiker\desktop\poll\node_modules\tapable\lib\HookCodeFactory.js:24:12), <anonymous>:11:1)
    at _addModuleChain (C:\Users\Gebruiker\desktop\poll\node_modules\webpack\lib\Compilation.js:749:12)
    at processModuleDependencies.err (C:\Users\Gebruiker\desktop\poll\node_modules\webpack\lib\Compilation.js:688:9)
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] watch: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=webpack.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] watch script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Gebruiker\AppData\Roaming\npm-cache\_logs\2018-03-21T12_36_06_781Z-debug.log

tailwindlabs / webpack-starter Goto Github PK

webpack-starter's People

Contributors

Stargazers

Watchers

Forkers

webpack-starter's Issues

Recommend Projects

Recommend Topics

Recommend Org